具有图像背景的可聚焦 WinRT UserControl答案

【问题标题】：Focusable WinRT UserControl with image background具有图像背景的可聚焦 WinRT UserControl
【发布时间】：2014-05-09 21:42:58
【问题描述】：

我在开发可显示图像、可聚焦和接收键盘输入的 WinRT 控件时遇到了困难。第一部分 - 在 UserControl 中显示图像 - 很简单；使用背景为 ImageBrush 的子 Rectangle 可以正常工作。

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

顺便说一下，这个 UserControl 目前正在 ContentControl 中进行测试，不确定这是否有什么不同。

如何使这个 UserControl 具有焦点并能够接收键盘输入？

【问题讨论】：

标签： image user-controls windows-runtime focusable

【解决方案1】：

你需要设置IsTabStop="True" 让它聚焦。 UserControl's 默认为 False。

您需要做的另一件事是显示一个焦点指示符，而UserControl 是免费提供的。这是您可以为其添加视觉效果的方法 - 从Button 模板复制：

<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>

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

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;
    }
}

【讨论】：

非常感谢您的详细回答。