UWP如何制作可聚焦的图像？

Question

我正在尝试创建一个可聚焦的图像，以显示移动或调整拇指大小。我知道 Image 标签不是控件，因此它不可聚焦，这在Image Documentation 中有解释。但是我需要做一些事件来让图像知道是否是焦点，以改变那些控制拇指的可见性。有人知道如何解决这个问题吗？ 我在 Canvas 中的控制如下。

         <Canvas x:Name="test">
            <Grid x:Name="grdTextbox" Canvas.Left="300" Canvas.Top="300" Height="200" Width="200" ManipulationMode="None">
                <Thumb x:Name="ThumbMove" Background="Transparent" Height="Auto" Width="Auto" DragDelta="ThumbMove_DragDelta" PointerEntered="ThumbMove_PointerEntered" PointerExited="ThumbMove_PointerExited" Margin="5" Canvas.ZIndex="1"  />
                <Thumb x:Name="ThumbBottomRight" Background="White" BorderBrush="Black" Height="20" Width="20" HorizontalAlignment="Right" DragDelta="ThumbBottomRight_DragDelta" VerticalAlignment="Bottom" PointerEntered="ThumbSizeNorthwestSoutheast_PointerEntered" PointerExited="ThumbMove_PointerExited"/>
                <Thumb x:Name="ThumbBottomLeft" Background="White" BorderBrush="Black"  Height="20" Width="20" HorizontalAlignment="Left" DragDelta="ThumbBottomLeft_DragDelta" VerticalAlignment="Bottom" PointerEntered="ThumbSizeNortheastSouthwest_PointerEntered" PointerExited="ThumbMove_PointerExited"/>
                <Thumb x:Name="ThumbTopRight" Background="White" BorderBrush="Black"  Height="20" Width="20"  HorizontalAlignment="Right" DragDelta="ThumbTopRight_DragDelta" VerticalAlignment="Top" PointerExited="ThumbMove_PointerExited" PointerEntered="ThumbSizeNortheastSouthwest_PointerEntered"/>
                <Thumb x:Name="ThumbTopLeft" Background="White" BorderBrush="Black"  Height="20" Width="20" HorizontalAlignment="Left" DragDelta="ThumbTopLeft_DragDelta"  VerticalAlignment="Top" PointerExited="ThumbMove_PointerExited" PointerEntered="ThumbSizeNorthwestSoutheast_PointerEntered"/>
                <Image Height="Auto" Width="Auto" Source="Assets/Square150x150Logo.png" Margin="2" Stretch="Uniform" PointerEntered="ThumbMove_PointerEntered" PointerExited="ThumbMove_PointerExited"  Tapped="Image_Tapped"/>
            </Grid>
        </Canvas>

Answer 1

UWP documentation 中有一个很好的关于启用键盘可访问性（包括焦点）的描述。

正如它所说：

如果您想在 UI 中使用的元素无法获得焦点，您可以创建自己的自定义控件。您必须将 IsTabStop 属性设置为 true 才能启用焦点，并且您必须通过创建用焦点指示器装饰 UI 的视觉状态来提供聚焦状态的视觉指示。

所以你可以做的是将Image 包裹在处理焦点的custom control 中。

然而，文档也说：

使用控件组合通常更容易，因此支持 制表位、焦点和 Microsoft UI 自动化对等点和模式是 由您选择在其中组成的控件处理 内容。

因此，如果您希望获得具有更好预实现支持的解决方案，您可以将 Image 包装在现有控件中，例如 Button：

<Button>
 <Image />
</Button>

优点是焦点的行为已经完全开箱即用。缺点是Button 当然不仅仅是聚焦，而且您可能必须修改默认样式以删除您不需要的样式。