やりたいこと

ふと気になったので実験したくなった。

画面の見た目上は同じ下記のようなものでも、
(赤いGridの上にButtonがあるように見える)

こういうコードと、

1.xaml

<Grid Background="Red">
    <Button/>
</Grid>

こういうコードでは、

2.xaml

<Grid Background="Red"/>
<Button/>

イベントの伝わり方は違うんだったか？今一度確認したい。

使うコード

以前書いた、こちらをベースにして、一部、下記のように直す。

ButtonがGridの外にあるパターン(親子関係なし)

ButtonがGridの外にあるパターン.xaml

<Grid x:Name="MainGrid"
      Background="#66FF0000"
      Margin="50"
      IsManipulationEnabled="True" 
      ManipulationStarting="MainGrid_ManipulationStarting" 
      ManipulationDelta="MainGrid_ManipulationDelta"
      ManipulationCompleted="MainGrid_ManipulationCompleted"
      
      PreviewMouseDown=             "MainGrid_PreviewMouseDown"             MouseDown="MainGrid_MouseDown"
      PreviewMouseUp=               "MainGrid_PreviewMouseUp"               MouseUp="MainGrid_MouseUp"
      PreviewTouchDown=             "MainGrid_PreviewTouchDown"             TouchDown="MainGrid_TouchDown"
      PreviewTouchUp=               "MainGrid_PreviewTouchUp"               TouchUp="MainGrid_TouchUp"
      PreviewStylusDown=            "MainGrid_PreviewStylusDown"            StylusDown="MainGrid_StylusDown"
      PreviewStylusUp=              "MainGrid_PreviewStylusUp"              StylusUp="MainGrid_StylusUp"
      PreviewMouseLeftButtonDown=   "MainGrid_PreviewMouseLeftButtonDown"   MouseLeftButtonDown="MainGrid_MouseLeftButtonDown"
      PreviewMouseLeftButtonUp=     "MainGrid_PreviewMouseLeftButtonUp"     MouseLeftButtonUp="MainGrid_MouseLeftButtonUp"
      PreviewMouseRightButtonDown=  "MainGrid_PreviewMouseRightButtonDown"  MouseRightButtonDown="MainGrid_MouseRightButtonDown"
      PreviewMouseRightButtonUp=    "MainGrid_PreviewMouseRightButtonUp"    MouseRightButtonUp="MainGrid_MouseRightButtonUp">
</Grid>

<Button Margin="150" Content="ボタン"
        Click="Button_Click"
        PreviewMouseDown="Button_PreviewMouseDown"                          MouseDown="Button_MouseDown"
        PreviewMouseUp="Button_PreviewMouseUp"                              MouseUp="Button_MouseUp"
        PreviewTouchDown="Button_PreviewTouchDown"                          TouchDown="Button_TouchDown"
        PreviewTouchUp="Button_PreviewTouchUp"                              TouchUp="Button_TouchUp"
        PreviewStylusDown="Button_PreviewStylusDown"                        StylusDown="Button_StylusDown"
        PreviewStylusUp="Button_PreviewStylusUp"                            StylusUp="Button_StylusUp"
        PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"      MouseLeftButtonDown="Button_MouseLeftButtonDown"
        PreviewMouseLeftButtonUp="Button_PreviewMouseLeftButtonUp"          MouseLeftButtonUp="Button_MouseLeftButtonUp"
        PreviewMouseRightButtonDown="Button_PreviewMouseRightButtonDown"    MouseRightButtonDown="Button_MouseRightButtonDown"
        PreviewMouseRightButtonUp="Button_PreviewMouseRightButtonUp"        MouseRightButtonUp="Button_MouseRightButtonUp"
/>

このコードで、ボタンを指でタッチしたときの出力

Button_PreviewStylusDown
Button_StylusDown
Button_PreviewTouchDown
Button_TouchDown
Button_PreviewMouseLeftButtonDown
Button_PreviewMouseDown
Button_PreviewStylusUp
Button_StylusUp
Button_PreviewTouchUp
Button_TouchUp
Button_PreviewMouseLeftButtonUp
Button_PreviewMouseUp
Button_Click

ButtonがGridの中にあるパターン(親子関係あり)

ButtonがGridの中にあるパターン.xaml

<Grid x:Name="MainGrid"
      Background="#66FF0000"
      Margin="50"
      IsManipulationEnabled="False" 
      ManipulationStarting="MainGrid_ManipulationStarting" 
      ManipulationDelta="MainGrid_ManipulationDelta"
      ManipulationCompleted="MainGrid_ManipulationCompleted"
      
      PreviewMouseDown=             "MainGrid_PreviewMouseDown"             MouseDown="MainGrid_MouseDown"
      PreviewMouseUp=               "MainGrid_PreviewMouseUp"               MouseUp="MainGrid_MouseUp"
      PreviewTouchDown=             "MainGrid_PreviewTouchDown"             TouchDown="MainGrid_TouchDown"
      PreviewTouchUp=               "MainGrid_PreviewTouchUp"               TouchUp="MainGrid_TouchUp"
      PreviewStylusDown=            "MainGrid_PreviewStylusDown"            StylusDown="MainGrid_StylusDown"
      PreviewStylusUp=              "MainGrid_PreviewStylusUp"              StylusUp="MainGrid_StylusUp"
      PreviewMouseLeftButtonDown=   "MainGrid_PreviewMouseLeftButtonDown"   MouseLeftButtonDown="MainGrid_MouseLeftButtonDown"
      PreviewMouseLeftButtonUp=     "MainGrid_PreviewMouseLeftButtonUp"     MouseLeftButtonUp="MainGrid_MouseLeftButtonUp"
      PreviewMouseRightButtonDown=  "MainGrid_PreviewMouseRightButtonDown"  MouseRightButtonDown="MainGrid_MouseRightButtonDown"
      PreviewMouseRightButtonUp=    "MainGrid_PreviewMouseRightButtonUp"    MouseRightButtonUp="MainGrid_MouseRightButtonUp">

    <Button Margin="150" Content="ボタン"
        Click="Button_Click"
        PreviewMouseDown="Button_PreviewMouseDown"                          MouseDown="Button_MouseDown"
        PreviewMouseUp="Button_PreviewMouseUp"                              MouseUp="Button_MouseUp"
        PreviewTouchDown="Button_PreviewTouchDown"                          TouchDown="Button_TouchDown"
        PreviewTouchUp="Button_PreviewTouchUp"                              TouchUp="Button_TouchUp"
        PreviewStylusDown="Button_PreviewStylusDown"                        StylusDown="Button_StylusDown"
        PreviewStylusUp="Button_PreviewStylusUp"                            StylusUp="Button_StylusUp"
        PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"      MouseLeftButtonDown="Button_MouseLeftButtonDown"
        PreviewMouseLeftButtonUp="Button_PreviewMouseLeftButtonUp"          MouseLeftButtonUp="Button_MouseLeftButtonUp"
        PreviewMouseRightButtonDown="Button_PreviewMouseRightButtonDown"    MouseRightButtonDown="Button_MouseRightButtonDown"
        PreviewMouseRightButtonUp="Button_PreviewMouseRightButtonUp"        MouseRightButtonUp="Button_MouseRightButtonUp"
    />
</Grid>

このコードで、ボタンを指でタッチしたときの出力

MainGrid_PreviewStylusDown
Button_PreviewStylusDown
Button_StylusDown
MainGrid_StylusDown
MainGrid_PreviewTouchDown
Button_PreviewTouchDown
Button_TouchDown
MainGrid_TouchDown
MainGrid_PreviewMouseLeftButtonDown
MainGrid_PreviewMouseDown
Button_PreviewMouseLeftButtonDown
Button_PreviewMouseDown
MainGrid_PreviewStylusUp
Button_PreviewStylusUp
Button_StylusUp
MainGrid_StylusUp
MainGrid_PreviewTouchUp
Button_PreviewTouchUp
Button_TouchUp
MainGrid_TouchUp
MainGrid_PreviewMouseLeftButtonUp
MainGrid_PreviewMouseUp
Button_PreviewMouseLeftButtonUp
Button_PreviewMouseUp
Button_Click

結果

Gridの上にボタンがあるように見える画面でも、Gridの中にButtonがある(=GridとButtonに親子関係がある)か、Gridの外にButtonがある(=GridとButtonに親子関係がない)かで、イベントの伝わり方が違う。

■左が親子関係なし、右が親子関係あり

当たり前かもだが、結果としては、

親子関係があれば、イベントはトンネリング、バブリングの原理でイベントが伝わる。
親子関係がなければ、イベントは伝わらない。