具有图像背景的可聚焦WinRT UserControl [英] Focusable WinRT UserControl with image background

问题描述

我在开发WinRT控件时遇到了困难，该控件可以显示图像并可以聚焦并接收键盘输入.第一部分-在UserControl中显示图像-很简单；使用背景为ImageBrush的子Rectangle效果很好.

I'm having difficulty developing a WinRT control that can display an image as well as be focusable and receive keyboard input. The first part - displaying an image in a UserControl - is straightforward; using a child Rectangle whose background is an ImageBrush works fine.

但是，调用UserControl.Focus(FocusState.Programmatic)(或任何其他焦点状态)不起作用-它返回false，并且未将焦点设置到用户控件.

However, calling UserControl.Focus(FocusState.Programmatic) (or any other focus state) does not work - it returns false and focus is not set to the user control.

顺便说一句，目前正在ContentControl内部测试此UserControl，不确定是否有任何区别.

Incidentally, this UserControl is currently being tested inside a ContentControl, not sure if that makes any difference.

如何使此UserControl具有可聚焦性并能够接收键盘输入?

How can I make this UserControl focusable and able to receive keyboard input?

推荐答案

您需要设置IsTabStop="True"使其聚焦. UserControl's默认值为False.

You need to set IsTabStop="True" to let it focus. UserControl's default is False.

您需要做的另一件事是显示聚焦指示器，而UserControl是免费提供的.这是您添加视觉效果的方法-从Button模板复制

Another thing you need to do is to display a focus indicator, which you don't get with UserControl for free. Here's the way you can add the visuals for it - copied from a Button template:

<Grid>
   <VisualStateManager.VisualStateGroups>
        <VisualStateGroup
            x:Name="FocusStates">
            <VisualState
                x:Name="Focused">
                <Storyboard>
                    <DoubleAnimation
                        Duration="0"
                        To="1"
                        Storyboard.TargetProperty="Opacity"
                        Storyboard.TargetName="FocusVisualWhite" />
                    <DoubleAnimation
                        Duration="0"
                        To="1"
                        Storyboard.TargetProperty="Opacity"
                        Storyboard.TargetName="FocusVisualBlack" />
                </Storyboard>
            </VisualState>
            <VisualState
                x:Name="Unfocused" />
            <VisualState
                x:Name="PointerFocused" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle
        x:Name="FocusVisualWhite"
        IsHitTestVisible="False"
        Opacity="0"
        StrokeDashOffset="1.5"
        StrokeEndLineCap="Square"
        Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
        StrokeDashArray="1,1" />
    <Rectangle
        x:Name="FocusVisualBlack"
        IsHitTestVisible="False"
        Opacity="0"
        StrokeDashOffset="0.5"
        StrokeEndLineCap="Square"
        Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
        StrokeDashArray="1,1" />
</Grid>

您仍然需要切换视觉状态，因此您可以执行以下操作:

You still need to switch the visual state and so you could do something like this:

protected override void OnGotFocus(RoutedEventArgs e)
{
    base.OnGotFocus(e);
    this.UpdateVisualState(true);
}

protected override void OnLostFocus(RoutedEventArgs e)
{
    base.OnLostFocus(e);
    this.UpdateVisualState(true);
}

private void UpdateVisualState(bool useTransitions)
{
    switch (this.FocusState)
    {
        case FocusState.Programmatic:
        case FocusState.Keyboard:
            VisualStateManager.GoToState(this, "Focused", useTransitions);
            break;
        case FocusState.Pointer:
            VisualStateManager.GoToState(this, "PointerFocused", useTransitions);
            break;
        case FocusState.Unfocused:
            VisualStateManager.GoToState(this, "Unfocused", useTransitions);
            break;
    }
}

这篇关于具有图像背景的可聚焦WinRT UserControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！