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

Question

我正在尝试创建一个可聚焦的图像，以便显示移动或调整拇指大小。我知道图像标记不是控件，因此它不可聚焦，这在此图像文档中进行了解释。但是我需要做一些事件来让图像知道是否正在聚焦以改变那些控制拇指的可见性。有人知道如何解决这个问题吗？我在 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 文档中有关于启用键盘辅助功能（包括焦点）的非常好的描述。

正如它所说：

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

因此，您可以做的是将 包装Image在处理焦点的自定义控件中。

然而，文档还说：

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

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

<Button>
 <Image />
</Button>

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