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

Question

我正在尝试创建一个可聚焦的图像，以便显示移动或调整大小 thumb.I 知道图像标签不是控件，因此它不可聚焦，这在 Image Documentation 中有解释.但是我需要做一些事件让图像知道是否正在聚焦以改变那些控件的可见性 thumbs.Does 谁知道如何解决这个问题？我在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.

中对启用键盘辅助功能（包括焦点）的描述非常好

正如它所说：

In cases where an element that you want to use in the UI cannot have focus, you could create your own custom control. You must set the IsTabStop property to true to enable focus and you must provide a visual indication of the focused state by creating a visual state that decorates the UI with a focus indicator.

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

然而，文档也说：

It is often easier to use control composition so that the support for tab stops, focus, and Microsoft UI Automation peers and patterns are handled by the control within which you choose to compose your content.

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

<Button>
 <Image />
</Button>

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

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

UWP how to make a focusable Image?

xaml

controls

canvas

image

uwp