teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

テストした XAML コードの記載漏れと出力結果の誤記修正。Button コントロールの重なりについての説明を追記。

2016/12/27 02:33

投稿

twyujiro15
twyujiro15

スコア217

answer CHANGED
@@ -1,76 +1,77 @@
1
- イベントは基本的には重なっているコントロールすべておいて順番に発生す。
1
+ Image コントロールに画像を指定ていないことが原因です。
2
+ 画像を表示しないと、掲載されているコードにおける状況では
2
- 途中 Button コントロールなどが重なっていると内部処理でイベント伝搬打ち切られるこがあります。
3
+ Image コントロールのサイズ幅、高さもにゼロなので、
4
+ マウスでクリックすることができない状態になっています。
3
5
 
4
- いまいちやりたいことが見えなかったでとりあえず掲載されたコードを実行してみま
6
+ 下記ように Image ントロルに対して Source プロパティなどで画像を表示するようにてください
5
- 結果から言うと、一体何が問題なのかがわかりませんでした。
6
7
 
7
- UcTest_02 ユーザーコントロールのコードビハインドを次のように変更して実行しました。
8
- イベント発生時に出力ウィンドウへメッセージを出力するようにしています。
9
-
10
- ```C#
8
+ ```XAML
11
- namespace WpfApplication1
9
+ <UserControl x:Class="WpfApplication1.UcTest_02"
12
- {
10
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
13
- using System.Windows.Controls;
11
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
12
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
13
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
14
- using System.Windows.Input;
14
+ mc:Ignorable="d"
15
-
15
+ d:DesignHeight="300" d:DesignWidth="300">
16
+ <Grid>
17
+ <Grid x:Name="GRD_TEST"
18
+ Width="100" Height="100"
19
+ Margin="10,10,0,0"
20
+ HorizontalAlignment="Left"
21
+ VerticalAlignment="Top"
22
+ Background="Red">
23
+ <Image x:Name="IMG_TEST1" Source="Penguins.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" />
24
+ <Image x:Name="IMG_TEST2" Source="Koala.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" Focusable="True" />
25
+ </Grid>
26
+ </Grid>
16
- /// <summary>
27
+ </UserControl>
17
- /// UcTest_02.xaml の相互作用ロジック
18
- /// </summary>
19
- public partial class UcTest_02 : UserControl
20
- {
21
- public UcTest_02()
22
- {
23
- InitializeComponent();
24
-
25
- IMG_TEST2.PreviewMouseLeftButtonDown += new MouseButtonEventHandler(OnPMLD);
26
- IMG_TEST2.PreviewMouseRightButtonDown += new MouseButtonEventHandler(OnPMRD);
27
- IMG_TEST2.PreviewMouseDown += new MouseButtonEventHandler(OnPMD);
28
- IMG_TEST2.MouseDown += new MouseButtonEventHandler(OnMD);
29
- IMG_TEST2.PreviewKeyDown += new KeyEventHandler(OnPreKey);
30
-
31
- GRD_TEST.PreviewMouseDown += new MouseButtonEventHandler(OnPMD2);
32
- }
33
-
34
- private void OnMD(object sender, MouseButtonEventArgs e)
35
- {
36
- System.Diagnostics.Debug.WriteLine("OnMD");
37
- }
38
-
39
- private void OnPMD(object sender, MouseButtonEventArgs e)
40
- {
41
- System.Diagnostics.Debug.WriteLine("OnPMD");
42
- }
43
-
44
- private void OnPMLD(object sender, MouseButtonEventArgs e)
45
- {
46
- System.Diagnostics.Debug.WriteLine("OnPMLD");
47
- }
48
-
49
- private void OnPMRD(object sender, MouseButtonEventArgs e)
50
- {
51
- System.Diagnostics.Debug.WriteLine("OnPMRD");
52
- }
53
-
54
- private void OnPMD2(object sender, MouseButtonEventArgs e)
55
- {
56
- System.Diagnostics.Debug.WriteLine("OnPMD2");
57
- }
58
-
59
- private void OnPreKey(object sender, KeyEventArgs e)
60
- {
61
- System.Diagnostics.Debug.WriteLine("OnPreKey");
62
- return;
63
- }
64
- }
65
- }
66
28
  ```
67
29
 
68
- 実行して赤色背景の部分をマウス左クリックしたときの出力結果は次のようになりました。
30
+ この状態で実行して画像部分をマウス左クリックしたときの出力結果は次のようになりました。
69
- > OnPMLD
31
+ > OnPMD2
32
+ OnPMLD
70
33
  OnPMD
71
- OnPMD2
72
34
  OnMD
73
35
 
74
36
  つまり IMG_TEST2 と GRD_TEST のイベントハンドラが
75
37
  Preview (トンネル型) から Preview なし (バブル型) へ、
76
- イベントハンドラを登録した順にきちんと呼び出されています。
38
+ イベントハンドラを登録した順にきちんと呼び出されています。
39
+
40
+ イベントは基本的には重なっているコントロールすべてにおいて順番に発生します。
41
+ 途中 Button コントロールなどが重なっていると内部処理でイベントの伝搬が打ち切られることがあります。
42
+ 例えば質問に掲載されている UcTest_02 ユーザーコントロールの XAML では
43
+ Image コントロールを Grid パネルの上に置いていますが、
44
+ その上にさらに Button コントロールを重ねると上記のイベント発生状況が変化します。
45
+ ```XAML
46
+ <UserControl x:Class="WpfApplication1.UcTest_02"
47
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
48
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
49
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
50
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
51
+ mc:Ignorable="d"
52
+ d:DesignHeight="300" d:DesignWidth="300">
53
+ <Grid>
54
+ <Grid x:Name="GRD_TEST"
55
+ Width="100" Height="100"
56
+ Margin="10,10,0,0"
57
+ HorizontalAlignment="Left"
58
+ VerticalAlignment="Top"
59
+ Background="Red">
60
+ <Image x:Name="IMG_TEST1" Source="Penguins.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" />
61
+ <Image x:Name="IMG_TEST2" Source="Koala.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" Focusable="True" />
62
+ <!-- ボタンを追加 -->
63
+ <Button Content="Click me." />
64
+ </Grid>
65
+ </Grid>
66
+ </UserControl>
67
+ ```
68
+ この状態で実行し、追加されたボタンをマウス左クリックしたとき、出力結果は次のようになります。
69
+
70
+ > OnPMD2
71
+
72
+ Image(IMG_TEST2) コントロールに関するイベントハンドラの処理がごっそりなくなっています。
73
+ これは Grid パネルの上に Button、Image(IMG_TEST2)、Image(IMG_TEST1) が順に重なっているからです。
74
+ まず Grid の Preview イベントが発生し、次に Button コントロールにそのイベントが伝搬します。
75
+ Button コントロールではマウス系のイベントを内部で処理しており、
76
+ 以降のイベント伝搬を継続しないという仕様になっています。
77
+ したがって、Button コントロールの後ろにある Image(IMG_TEST2) にイベントが伝わらなくなります。