Question

我试图创建一个可聚焦的图像，以显示移动或调整大小拇指。我知道图像标记不是一个控件，所以它不可聚焦，这在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不仅仅是聚焦，当然，您可能需要修改默认样式以删除您不需要的样式。

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

1 个答案: