如何在用户控件中利用图像控件的透明空间？

Question

我有一个用户控件，它具有一个png图像，如下所示，我开发了它来替换uwp中的自定义按钮。它按预期工作，我的问题是，用户控件占据了用户控件基本Canvas / Grid的整个矩形空间，而不是用户控件中显示的png图像的确切空间。请看下面的图片以了解这一点。

假设该用户控件下方有一些按钮，则无法单击Btn1，Btn6，Btn7。我想单击Btn5，但是即使它可见并且未被用户控件的图像覆盖，我也无法单击Btn5！（但是它位于用户控件的边界内） 下面是我的usecontrol的代码：

...d:DesignWidth="1200">

<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Image Stretch="Fill" 
           Canvas.Left="{x:Bind FocusLeft, Mode=OneWay}"
           Canvas.Top="{x:Bind FocusTop, Mode=OneWay}"
           Height="{x:Bind FocusHeight, Mode=OneWay}"
           Width="{x:Bind FocusWidth, Mode=OneWay}"
           Source="arrowsmall.png"
           HorizontalAlignment="Center" />

</Canvas>

Answer 1

通过查看您的XAML代码，我假设屏幕上的图像不可点击，并且用户不希望直接与之交互。

基于以上假设，您可以向图像添加IsHitTestVisible="False"，这将允许用户“点击”图像。

但是，这当然将允许用户“单击”图像并单击按钮2,3和4。因此，您将需要添加一些功能来计算图像的位置并将按钮直接设置在图像的后面到IsHitTestVisible="False"。