[WPF] コントロールをマウスクリック/タッチしたときのイベントの流れを今一度確認②

**全体もくじ**
⇒https://qiita.com/tera1707/items/4fda73d86eded283ec4f

**イベント関連のもくじ**
⇒https://qiita.com/tera1707/items/4fda73d86eded283ec4f#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E9%96%A2%E9%80%A3wpfxaml


# やりたいこと

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

画面の見た目上は同じ下記のようなものでも、
(赤いGridの上にButtonがあるように見える)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/1a9aff70-20b1-c4f6-1224-c26abf0354a5.png)

こういうコードと、

```1.xaml
<Grid Background="Red">
    <Button/>
</Grid>
```

こういうコードでは、

```2.xaml
<Grid Background="Red"/>
<Button/>
```

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

# 使うコード

以前書いた、[こちら](https://qiita.com/tera1707/items/53d17c2534d75bf36853#%E3%82%B3%E3%83%BC%E3%83%89)をベースにして、一部、下記のように直す。

## 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に親子関係がない)かで、イベントの伝わり方が違う。

■左が親子関係なし、右が親子関係あり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/1ced7c85-d268-7f2c-b92b-f390b6f0eb32.png)

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

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