UWP 空のCanvasがPointerPressedイベントを発行しない

# 問題の発生する状況

画像を格納する`Grid`内に、`Image`と共に`Canvas`を設ける。当初、編集領域を示す長方形等を表示する`Canvas`があり(CommandCanvas)、今回、右クリックで画素の情報を取得するための`Canvas`を追加した(SpoitCanvas)。

ところが、CommandCanvasでは、マウスのクリックによる`PointerPressed`イベントを受信できていたが、SpoitCanvasでは受信できず、イベントハンドラルーチンに処理が渡らない。

```XML:MainPage.xaml
<Grid x:Name="EditingGrid">
    <Canvas x:Name="SpoitCanvas" Canvas.ZIndex="2" Style="{StaticResource SpoitCanvas}" SizeChanged="SpoitCanvas_SizeChanged" PointerPressed="SpoitCanvas_PointerPressed" PointerReleased="SpoitCanvas_PointerReleased" />

    <Canvas x:Name="CommandCanvas" Canvas.ZIndex="2" Style="{StaticResource CommandCanvas}" SizeChanged="CommandCanvas_SizeChanged" PointerPressed="CommandCanvas_PointerPressed" PointerReleased="CommandCanvas_PointerReleased" PointerMoved="CommandCanvas_PointerMoved">
        <Canvas.Background>
            <SolidColorBrush Color="Maroon" Opacity="0.0"/>
        </Canvas.Background>
        <Rectangle x:Name="CropRectangle" Width="{x:Bind _ImageCrop.ScaledBoundaryWidth, Mode=OneWay}" Height="{x:Bind _ImageCrop.ScaledBoundaryHeight, Mode=OneWay}" Canvas.Left="{x:Bind _ImageCrop.LeftWithOffset, Mode=OneWay}" Canvas.Top="{x:Bind _ImageCrop.TopWithOffset, Mode=OneWay}" Stroke="{x:Bind _Settings.SelectedCropBorderBrush.Brush, Mode=OneWay}" Style="{StaticResource CropRectangle}" />
        <Rectangle x:Name="PixelizeRectangle" Width="{x:Bind _ImagePixelize.ScaledBoundaryWidth, Mode=OneWay}" Height="{x:Bind _ImagePixelize.ScaledBoundaryHeight, Mode=OneWay}" Canvas.Left="{x:Bind _ImagePixelize.LeftWithOffset, Mode=OneWay}" Canvas.Top="{x:Bind _ImagePixelize.TopWithOffset, Mode=OneWay}" Stroke="{x:Bind _Settings.SelectedCropBorderBrush.Brush, Mode=OneWay}" Style="{StaticResource CropRectangle}" />
        <Polygon x:Name="TrapezoidalPolygon" Points="{x:Bind _ImageTrapezoidalTR.Points, Mode=OneWay}" Stroke="{x:Bind _Settings.SelectedCropBorderBrush.Brush, Mode=OneWay}" Canvas.Left="{x:Bind _ImageTrapezoidalTR.LeftOffset, Mode=OneWay}" Canvas.Top="{x:Bind _ImageTrapezoidalTR.TopOffset, Mode=OneWay}" Style="{StaticResource TrapezoidalPolygon}"/>
    </Canvas>
                        
    <Image x:Name="EditingImage" Canvas.ZIndex="1" Style="{StaticResource EditingImage}" ImageOpened="EditingImage_ImageOpened" SizeChanged="EditingImage_SizeChanged" Loaded="EditingImage_Loaded">
        <Image.RenderTransform>
            <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
        </Image.RenderTransform>
    </Image>
</Grid>
```

`Grid`内の最初の`Canvas`が、今回追加したもの。

# 対処

ヒントは、CommandCanvas(当初設置した`Canvas`)の無意味な`Background`の定義にあった。`Background`の定義を加えることで、無事、`PointerPressed`のイベントハンドラに処理が渡る。

なお、CommandCanvasでは`Background`の定義を外しても、`PointerPressed`のイベントが発生する。例では、`Rectangle`が`Canvas`全域に描画されているが(Styleで指定)、これが条件になっている。

ところが、`Rectangle`の描画域を`Canvas`全域から狭めると、`Rectangle`の外側ではイベントが発生しなくなる。ここから、`Canvas`に描画されている`何か`の内側で`PointerPressed`のイベントが発生すると考えるべきのようである。

したがって、`Canvas`に描画するのは何でもよいわけではなく、`Canvas`全域で`PointerPressed`イベントを発生させるには、`Background`の定義が確実といえる。

:::note info
StackOverflowの2017年の記事に似たような事象の報告がある。ここでは、BackgroundにTransparentを設定せよ、とあるが、色は関係ない様子。
[StackOverflowの記事 "Canvas doesn't get pointer events"](https://stackoverflow.com/questions/44594815/canvas-doesnt-get-pointer-events)
:::

```XML:ResourceDictionary
<Style x:Key="CommandCanvas" TargetType="Canvas">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

<Style x:Key="SpoitCanvas" TargetType="Canvas">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Visibility" Value="Visible"/>
    <Setter Property="Opacity" Value="0.0"/>
    <!-- w/o Background, PointerPressed event is never fired -->
    <Setter Property="Background" Value="Maroon"/>
</Style>
```

ResouceDictionaryの`Style`に`Background`の定義を加えたところ。色は不要なので、`Opacity`の設定で無効にしている。