时间戳

首页 > 解决方案 > 如何使用键盘 Tab 键导航或选择 WPF 图像？

wpf - 如何使用键盘 Tab 键导航或选择 WPF 图像？

问题描述

WPF 图像无法通过键盘访问。要求是工具提示中的 Tab 键焦点必须打开并保持到 Tab 键焦点消失。如何在 Xaml 中实现它？

代码如下所示，

                                 <Image Height="17"
                                   x:Name="tabinfoIcon"
                                   Stretch="Fill"
                                   Width="17"
                                   Cursor="Hand"
                                   Margin="5">
                                <Image.ToolTip>
                                    <ToolTip Background="#FFFEFEFE"
                                             Foreground="#FF5E5D5D"
                                             Placement="MousePoint"
                                             x:Name="tabToolTip">
                                        <TextBlock Width="200"
                                                   Padding="10,10"
                                                   TextWrapping="WrapWithOverflow"
                                                   Text="{x:Static resx:Strings.TabToolTipText}">
                                        </TextBlock>
                                    </ToolTip>
                                </Image.ToolTip>
                            </Image>

标签： wpfimagexamltooltipaccessibility

解决方案

Image不是一个Control因此也不是制表位或导航目标。

为了解决这个问题，您可以将 a 包装Image成 aContentControl并使用 aPopup来显示键盘焦点的工具提示：

<StackPanel>
  <Popup IsOpen="{Binding ElementName=ImagePresenter, Path=IsKeyboardFocusWithin, Mode=OneWay}"
         PlacementTarget="{Binding ElementName=ImagePresenter}" 
         AllowsTransparency="True">
    <TextBlock Text="{x:Static resx:Strings.TabToolTipText}" />
  </Popup>
  <ContentControl x:Name="ImagePresenter" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Image Height="100" x:Name="tabinfoIcon" 
           Stretch="Fill"
           Width="100"

           Cursor="Hand"
           Margin="5">
      <Image.ToolTip>
        <ToolTip Background="#FFFEFEFE"
                 Foreground="#FF5E5D5D"
                 Placement="MousePoint"
                 x:Name="tabToolTip">
          <TextBlock Width="200"
                     Padding="10,10"
                     TextWrapping="WrapWithOverflow"
                     Text="{x:Static resx:Strings.TabToolTipText}">
          </TextBlock>
        </ToolTip>
      </Image.ToolTip>
    </Image>
  </ContentControl>
</StackPanel>

推荐阅读