难以点击物品 - 扩大命中区域答案

【问题标题】：Difficult to get an item tapped - Expand hit area难以点击物品 - 扩大命中区域
【发布时间】：2016-08-31 20:27:28
【问题描述】：

我有一个图像，我想从中获取水龙头（实际上是包含它的网格，因为它更大）。但这不起作用，因为我在触摸屏幕时必须非常精确才能触摸按钮，否则将无法正常工作。

<Grid Grid.Column="0" Tapped="DrawerIcon_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Margin="5" x:Name="DrawerIcon"  Source="/Assets/but_drawer.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image.RenderTransform>
                    <CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
                </Image.RenderTransform>
            </Image>
        </Grid>

有什么方法可以扩大点击时被击中的元素的区域？

【问题讨论】：

我已经尝试将图像放大（将 ScaleX 和 ScaleY 更改为 1.0），但我并没有太大变化...
按照@Barnstokkr 的建议，将事件附加到容器是最好的方法

标签： c# windows windows-phone-8.1

【解决方案1】：

CompositeTransform 只会使图像变大，要使 Hit 区域变大，您必须执行以下操作：

和你一样，用Grid包围对象（Image）
将Tapped 事件添加到Grid
Image 的Margin 将确定命中区域；因此，将其增大将使命中区域更大（或使Grid 更大的任何东西）。
最后，也是最烦人的：让 Background 的 Grid 透明！

要修复您的代码，只需添加Background="Transparent"，如果您愿意，还可以将 Margin 增加到 10：

 <Grid Grid.Column="0" Background="Transparent" Tapped="DrawerIcon_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
      <Image Margin="10" x:Name="DrawerIcon"  Source="/Assets/but_drawer.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" >
          <Image.RenderTransform>
               <CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
          </Image.RenderTransform>
     </Image>
 </Grid

希望这会有所帮助。

【讨论】：

我尝试了你的建议，但它不起作用......嗯，它起作用了，但不像预期的那样。我必须非常小心和精确才能让它发挥作用。
我在上面放了一个大矩形，但它也不能正常工作......我只是不知道出了什么问题......

【解决方案2】：

我通过在每个Grid 上创建一个透明的矩形来实现它，该矩形覆盖我想要被点击的对象（仅在根Grid 下）并将 Tapped 事件附加到它。显然在Grids 和Stackpanels 下会以某种方式影响 Tapped 事件。这不是真正的修复，只是一种解决方法。也许这是一个错误。

【讨论】：