WPFのCanvasでマウスイベントが取得できない時がある。

Question

C# + WPFのプログラムを勉強して半年程の初心者です。

WPFのCanvas上で図形描画をC#から定期的に更新する処理を作っています。（パラパラ漫画的なものです）
処理は単純でタイマー（Timerクラス）のCallBack関数から一回画面をClear()して図形を描画するという動作になっています。
見た目は特に問題なく動ているのですが、マウスでのヒットテストの処理も入ってるのですが、時々イベントハンドラに処理が飛んでこない事があります。
タイマのタイムアウト時間を早くすると顕著になります。
上記で説明したような処理に問題があるのか、ご教授頂けると幸いです。

該当のソースコード

XAML

<Canvas x:Name="canvas"
MouseLeftButtonDown="canvas_MouseLeftDown">
…
</Canvas>

C#

void TimerCallBack(object state)
{
    this.Dispatcher.BeginInvoke(new Action(() => {
    {
        canvas.Children.Clear();
        図形描画の処理
　　　　}
    }));
}

private void canvas_MouseLeftDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
     ヒットテスト処理
}
 

補足情報（FW/ツールのバージョンなど）

Visual Studio 2019
.framework 4.8

Comments

[dodox86]

タイマのコールバック内の図形描画処理はUIスレッドで行われているはずなので、そこで時間を占有すると同じUIスレッドでのマウスイベントのハンドルがスキップ、あるいは遅延してしまうのだと思います。（あくまで推測なのでコメントのみ、ですが）

[Jellyfish0511]

早々のコメントありがとうございます。
描画するオブジェクト数をかなり減らしてみたのですが、結果は変わりませんでした。
また、何も描画されていない個所をクリックする分には、正常にハンドラに飛ぶので良くわからないですね。

Answer 1

100本の棒が回転しています（これ自体に意味はない。動いてるのがわかりやすい例ってだけ）
棒の中央あたりをクリック連打してください。
中央あたりは常に反応するはずですが、たまに抜けるのが確認できると思います（抜けない場合はiterationを増やしてください。カクカクになるくらいでちょうどいいです）
タイマーの種類はあまり関係ありません。
canvas.Children.Clear()している以上、反応するかはタイミング次第ということになります。

<Window
  x:Class="Questions269801.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450">
  <Canvas x:Name="canvas" MouseLeftButtonDown="canvas_MouseLeftDown" />
</Window>

using System;
using System.Diagnostics;
using System.Linq;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace Questions269801
{
    public partial class MainWindow : Window
    {
        System.Threading.Timer threadingTimer;
        DispatcherTimer dispatcherTimer;

        const int iteration = 100;
        int angle;
        public MainWindow()
        {
            InitializeComponent();

            //threadingTimer = new System.Threading.Timer(new System.Threading.TimerCallback(TimerCallBack));
            //threadingTimer.Change(0, 1);

            dispatcherTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(1), };
            dispatcherTimer.Tick += Timer_Tick;
            dispatcherTimer.Start();
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            angle++;
            var sin = Math.Sin(angle * (Math.PI / 180));
            var cos = Math.Cos(angle * (Math.PI / 180));
            canvas.Children.Clear();

            foreach(var i in Enumerable.Range(0, iteration))
            {
                var line = new Polyline { Stroke = Brushes.Black, StrokeThickness = 50, };
                line.Points.Add(new Point(cos * 100 + 200 + i * 100, sin * 100 + 200));
                line.Points.Add(new Point(-cos * 100 + 200 + i * 100, -sin * 100 + 200));
                canvas.Children.Add(line);
            }
        }

        void TimerCallBack(object state)
        {
            angle++;
            var sin = Math.Sin(angle * (Math.PI / 180));
            var cos = Math.Cos(angle * (Math.PI / 180));
            Dispatcher.BeginInvoke(new Action(() =>
            {
                canvas.Children.Clear();

                foreach(var i in Enumerable.Range(0, iteration))
                {
                    var line = new Polyline { Stroke = Brushes.Black, StrokeThickness = 50, };
                    line.Points.Add(new Point(cos * 100 + 200 + i * 100, sin * 100 + 200));
                    line.Points.Add(new Point(-cos * 100 + 200 + i * 100, -sin * 100 + 200));
                    canvas.Children.Add(line);
                }
            }));
        }

        private void canvas_MouseLeftDown(object sender, MouseButtonEventArgs e)
        {
            Debug.WriteLine("canvas_MouseLeftDown");
        }
    }
}

---

hihijijiさんが言っているように、クリアしない手法を考える必要があります。
どうするかは描画内容次第ですが、今回はRotateTransformを使ってみました。
クリック連打時の違いを確認してください。

xamlは同一

using System;
using System.Diagnostics;
using System.Linq;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace Questions269801
{
    public partial class MainWindow : Window
    {
        DispatcherTimer dispatcherTimer;

        const int iteration = 100;
        int angle;
        public MainWindow()
        {
            InitializeComponent();

            dispatcherTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(1), };
            dispatcherTimer.Tick += Timer_Tick;
            dispatcherTimer.Start();

            angle++;
            var sin = Math.Sin(angle * (Math.PI / 180));
            var cos = Math.Cos(angle * (Math.PI / 180));
            canvas.Children.Clear();

            foreach(var i in Enumerable.Range(0, iteration))
            {
                var line = new Polyline { Stroke = Brushes.Black, StrokeThickness = 50, };
                line.Points.Add(new Point(cos * 100 + 200 + i * 100, sin * 100 + 200));
                line.Points.Add(new Point(-cos * 100 + 200 + i * 100, -sin * 100 + 200));
                line.RenderTransform = new RotateTransform
                {
                    CenterX = 200 + i * 100,
                    CenterY = 200,
                };
                canvas.Children.Add(line);
            }
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            angle++;
            foreach(Polyline line in canvas.Children)
            {
                var t = line.RenderTransform as RotateTransform;
                t.Angle = angle;
            }
        }

        private void canvas_MouseLeftDown(object sender, MouseButtonEventArgs e)
        {
            Debug.WriteLine("canvas_MouseLeftDown");
        }
    }
}

Comments

[Jellyfish0511]

大変丁寧なご回答ありがとうございました。
クリアしない手法のサンプルをこちらで動かした所、正常に動いていることを確認できました。
上記サンプルを例にこちらのプログラムを修正したいと思います。
ご対応ありがとうございました。

Answer 2

<Canvas x:Name="canvas" Background="Black"/>
<Canvas x:Name="mouseCanvas" Background="Transparent" MouseLeftButtonDown="canvas_MouseLeftDown"/>

マウスクリック用の透明なキャンバスを上から被せれば、描画用のキャンバスをクリアしてもイベントがクリアされないので、問題無く動作しています。

Comments

[TN8001]

それで済む話だったのですか？
なら要素のIsHitTestVisibleをfalseにすれば、常にCanvasに届くんじゃないですかね？（詳細な確認はしていません）
falseでもVisualTreeHelper.HitTestは反応します（確認済み）
もちろんHitTest中にビジュアル ツリーを変更するすると、同じような問題は出ます。

まあ１枚余計にかぶせても大差ないでしょうが^^;

[Jellyfish0511]

ご連絡ありがとうございます。
教えて頂いた方法でもマウスイベントがCanvasに届くようになり、VisualTreeHelper.HitTestも動いています。
何度もご回答を頂き誠にありがとうございました。

教えて頂いた方法やCanvasを被せた時でもマウスイベントは取れるようにはなりますが、結局はClear()はしているのでタイミングによってはHitTestが失敗すると思っていたのですが、どういう訳か殆ど失敗せず（稀に失敗しているのかもしれないのですが）許容できる範囲です。

素人的な発想ですがマウスイベントで座標を取っておき、Clear()する直前、又は直後でHitTestをすれば上記失敗も回避できるのではと思っていますが駄目ですかね。

[TN8001]

通知が来なくて気が付くのが遅れました。すいません。

> 素人的な発想ですがマウスイベントで座標を取っておき、Clear()する直前、又は直後でHitTestをすれば上記失敗も回避できるのではと思っていますが駄目ですかね。

コールバック（HitTestResultCallback）を使うと処理が前後しそうな気がするんですが、詳細は追っていません^^;

まあ動いているならそれが正義という気はします^^;

[Jellyfish0511]

ご連絡ありがとうございました。

＞まあ動いているならそれが正義という気はします^^;

カップインまではしていませんが、動いているから良しとしたいと思います。
まさか２年近く経過して本件がクローズするとは夢にも思いませんでした。

色々とアドバイスを頂きにありがとうございました。

Answer 3

Canvasの子要素をクリックしてCanvasがイベントを受け取れるのは、WPFのルーティングイベント-バブルイベントの仕組みのおかげです。
内部では、子要素で処理しなかったイベントを親要素に投げているのです。
Canvasをクリアしたタイミングによっては、イベントを投げる前に子要素との親子関係が切れたり子要素自体が消されたりは十分考えられます。

詳しくは「WPF ルーティングイベント」でググってくだされたし。

Comments

[Jellyfish0511]

ご回答ありがとうございます。
この対策で良いのか分からないのですが、
試しに子要素（図形）のマウスボタン押下のイベントハンドラも登録してみました。
例）
var line = new PolyLine();
line .Points.Add(new Point(0.0, 0.0));
line .Points.Add(new Point(10.0, 10.0));
…
line.MouseLeftButtonDown += line_MouseLeftButtonDown;
…（座標変換も実施）
add.canvas.Children(line);

失敗する頻度は下がったような気がするのですが、
canvas, 図形、両方のイベントハンドラが呼ばれない時があります。

[hihijiji]

いやいや
canvas.Children.Clear();
をやめましょう。

[Jellyfish0511]

Remove, RemoveAt, RemoveRange等を使って、削除しながら描画するという事でしょうか。

[hihijiji]

おそらく部分的な変更で対処するのは困難だと思います。
WPFの特性を理解した上で根本的に実装を見直すことをお勧めします。

Answer 4

できるだけ単純化したアプリで同様の状況が発生するか確認してみてください。
以下のコードでは問題は発生しないので、UIの問題ではなくタイマー処理の問題かもしれません。

<Window
    x:Class="WPF_Canvas.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="300" Width="300"
    >
    <DockPanel>
        <Button DockPanel.Dock="Bottom"
                Width="100" Margin="0, 10"
                Content="Clear Canvas" Click="Button_Click"
                />
        <Canvas x:Name="xCanvas"
                Background="Transparent"
                MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
                >
            <Rectangle Canvas.Top="70" Canvas.Left="100"
                       Width="100" Height="100"
                       Fill="Aquamarine" 　　　　　　　 
                       MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
                       />
        </Canvas>
    </DockPanel>
</Window>

using System.Diagnostics;
using System.Windows;
using System.Windows.Input;

namespace WPF_Canvas
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Debug.WriteLine("Canvas_MouseLeftButtonDown!");
            e.Handled = true;
        }

        private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Debug.WriteLine("Rectangle_MouseLeftButtonDown!");
            e.Handled = true;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            xCanvas.Children.Clear();
            e.Handled = true;
        }
    }
}

Comments

[Jellyfish0511]

-----------------XAML---------------
<Window x:Class="AppTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:AppTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Canvas
x:Name="canvas"
Background="Black"
MouseLeftButtonDown="Canvas_MouseLeftButtonDown">
</Canvas>
</Window>
-------------------------------------

-----------------C#---------------
using System;
using System.Diagnostics;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace AppTest
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
Timer drawTimer;
public MainWindow()
{
InitializeComponent();

drawTimer = new Timer(TimeCallBackDraw, null, Timeout.Infinite, Timeout.Infinite);
drawTimer.Change(0, 10);
}

void TimeCallBackDraw(object state)
{
this.Dispatcher.BeginInvoke(new Action(() => {

canvas.Children.Clear();

for (int i = 0; i < 10; i++) {
Ellipse ellipse = new Ellipse();
ellipse.Width = 30;
ellipse.Height = 30;
ellipse.Fill = Brushes.White;
ellipse.Stroke = Brushes.White;

Canvas.SetTop(ellipse, 10 + i * 10);
Canvas.SetLeft(ellipse, 10 + i * 10);

canvas.Children.Add(ellipse);
}
}));
}

int count = 0;
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Debug.WriteLine($"MouseLeftDown : {count++}");
}
}
}
-------------------------------------

上記のような単純なソフトで確認してみたのですが、円の上でクリックすると時々イベントが飛んでこない時があります。何も描画されていない所では、問題ないです。

Answer 5

結論から言えば、Canvasに何も書かれていない場所はmouseイベントが素通りしているだけです。
新規に作成した以下のアプリにCanvasとmouseイベントハンドラーを追加しただけではCanvasでmouseイベントは発生しません。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Canvas MouseLeftButtonDown="Canvas_MouseLeftButtonDown"/>
    </Grid>
</Window>

using System.Diagnostics;
using System.Windows;
using System.Windows.Input;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Debug.WriteLine("Canvas_MouseLeftButtonDown!");
        }
    }
}

　
でも、こうすれば見た目は同じでもmouseイベントが発生するはずです。

        <Canvas MouseLeftButtonDown="Canvas_MouseLeftButtonDown" Background="Transparent">

Comments

[Jellyfish0511]

ご回答ありがとうございます。
こちらのサンプルソースに誤りがあり、XAMLにはBackgroundで色を付けております。
全くcanvasのマウスイベントが入らなくなるのではなく、
canvas.Children.Clear();
を実行すると、時々マウスイベントが入らない時があるようです。