关注细节——控件上的焦点虚框

这里我们主要讨论这个焦点虚框的摆放位置。有人可能要说这个就用系统自定义的位置不是挺好的吗？而且改起来又麻烦。

没有错，系统默认位置很好很强大，但是如果在别的技术实现中就不一定了。比如让我又爱又恨的WPF。

我们看看非WPF的CheckBox的虚框在什么地方。

如果使用的Windows 7系统，请依下面的步骤开启Access Key的默认显示功能。这个功能的另一个效果就是点在Focusable控件上之后虚框才会自动出现。如果不开启，虚框得用Tab键才能出现。

Control Panel -> Ease of Access -> Change how your keyboard works.

选中 Underline keyboard shortcuts and access keys.

注意虚框的位置如何摆放的要点，没有挡住文本的任何部分。

这太合理了。但是我们看WPF中，同样的CheckBox的显示效果是什么样的。字体与字体大小一致。

1. 虚框把字母g的最下边一个像素挡住了。

2. 虚框右边与最后一个字母g过近，也影响阅读。

3. 虚框的左边，位于文字和方框之间比如合适。不过这个问题不大。

4. 系统的虚框是一个空白一个黑点。WPF的虚框是一个空白，两个灰点。这个不是问题，但是为什么一定要搞特殊呢？这个虚框的风格统一不更好么？

还好，用一个Style就可以解决这个问题。

<Style x:Key="CheckFocusStyle"
       TargetType="{x:Type Control}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Control}">
                <Rectangle Margin="15,0,-1,-1"
                               StrokeDashArray="1 2"
                               Stroke="Black"
                               StrokeThickness="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type CheckBox}">
    <Style.Triggers>
        <Trigger Property="HasContent" Value="True">
            <Setter Property="FocusVisualStyle"
                    Value="{StaticResource CheckFocusStyle}"/>
        </Trigger>
    </Style.Triggers>
</Style>

在不改变Template的情况下，这是最简单的方法了。问题4是由于像素点没有对齐到Device Pixels所致。我一时也没有找到好的办法。至少问题1，2 和3是解决了。最终截图如下。

WPF中很多控件的Focus Style都有问题。这里就不一一列举了。希望大家能在使用WPF时注意一下。这等问题虽然小，却能体现出软件的品质和对用户的关注。这个例子也说明了，我们需要一个统一的位置来管理Style，显然不会让每个Dev都花时间花在这上面。