[WPF Bug清单]之(10)——CheckBox在不同主题下具有不同的行为

我们都知道Window有多种主题（Theme）。一般情况下，显然我们会希望不同主题下，我们的应用程序的行为不会有变化。或者说，我们不希望为了特定的主题，为控件写特定的逻辑。然而不幸的是，.NET Framework里一些控件自带的主题就存在问题，使得我们不得不在使用时，为这个控件在特定的主题下特殊处理。

下面举一个例子。在ListBox里放CheckBox，组成一个CheckBoxList应该是一个比较常见的应用。从理论上来说，在WPF里最简单的方式就是在ListBox的ItemTemplate里或是ItemContainerStyle里放一个CheckBox就可以了。

但是实际上，在做这个简单的CheckBoxList的时候，会遇到一个又一个的问题。首先重申一下文本的意图，怕自己又没有说明白误导大家。本文不是讨论CheckBoxList里的蓝条问题，而是在讨论CheckBox在不同主题下的不同行为的问题。CheckBoxList仅仅是个例子。

先来看看效果图。

图1. 两种主题下的CheckBox

在上图中，左侧是Classic主题下的CheckBox。右侧是XP默认的Luna主题下的CheckBox。

问题1. CheckBox的IsChecked状态与ListBoxItem的IsSelected状态不同步。如果你想保留选中时的蓝条，那么比较好办，把这两个属性Binding到一起就可以了。如果你不想要那个选中时的蓝条，会稍稍复杂一些。解决方案很多，就不赘述了。示例程序中，为减少干扰，不对这个问题进行解决。

问题2. CheckBox所在的Item被选中时，为蓝色。CheckBox里的文字为黑色，这个与ListBoxItem的默认颜色行为不一致。为了让CheckBox在被选中时文字为白色并不难，写个Binding就OK了。这个根本不是问题，但是解决这个问题，造成了下面的问题，才是主要问题。（当然，如果你隐藏了蓝条，就没有任何问题。）

问题3. 这个是这篇文章的主要议题，看看下面几个图就知道了。我们对两边的CheckBoxList做同样的操作。先来右边的。

图2. 选中最后一个CheckBox

图3. 点击刚才选中CheckBox边上的空白，使其选中

注意，这里CheckBox里的勾还是可见的。很费话是吧，怎么可能不见？下面让你来见识一下，Classic主题下的勾就看不到了。跟没有选中一样。

图4. 选中经典CheckBox，勾可见

图5. 点击空白，选中它，勾不见了

再给个提示，注意图2和图3，之间的变化，Item3被选中之后，变成了白色。而勾的颜色没有变。再来看图4和图5。

应该已经猜到了吧？没有错，Classic主题下，CheckBox里的勾也成了白色的。

熟悉WPF的人应该也已经猜到了，这个是由于不同主题下，CheckBox的默认Template的实现不同所导致的。下面是CheckBox在不同主题下的代码。（直接来自于Blend，根本来源是.NET Framework里的PresentationFramework.Classic和PresentationFramework.Luna两个DLL。）

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic">
    <!-- Resource dictionary entries should be defined here. -->
    <Style x:Key="CheckRadioFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="EmptyCheckBoxFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="1" SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ClassicCheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{x:Static Microsoft_Windows_Themes:ClassicBorderDecorator.ClassicBorderBrush}"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Padding" Value="2,0,0,0"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <BulletDecorator SnapsToDevicePixels="true" Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Microsoft_Windows_Themes:ClassicBorderDecorator x:Name="CheckMark" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderStyle="Sunken" BorderThickness="{TemplateBinding BorderThickness}">
                                <!-- The following Path Binding Fill to Foreground of Templated parent, which is different from Luna's template -->
                                <Path x:Name="CheckMarkPath" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="1,1,1,1"
                                       Width="7" Height="7" Data="M 0 2.0 L 0 4.8 L 2.5 7.4 L 7.1 2.8 L 7.1 0 L 2.5 4.6 Z"/>
                            </Microsoft_Windows_Themes:ClassicBorderDecorator>
                        </BulletDecorator.Bullet>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Visibility" TargetName="CheckMarkPath" Value="Hidden"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Background" TargetName="CheckMark" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
                            <Setter Property="Fill" TargetName="CheckMarkPath" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="CheckMark" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="CheckMark" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <Setter Property="Fill" TargetName="CheckMarkPath" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

代码1. Classic主题下CheckBox的默认Template

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna">
    <!-- Resource dictionary entries should be defined here. -->
    <LinearGradientBrush x:Key="CheckRadioFillNormal">
        <GradientStop Color="#FFD2D4D2" Offset="0"/>
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="CheckRadioStrokeNormal">
        <GradientStop Color="#FF004C94" Offset="0"/>
        <GradientStop Color="#FF003C74" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="LunaCheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Background" Value="{StaticResource CheckRadioFillNormal}"/>
        <Setter Property="BorderBrush" Value="{StaticResource CheckRadioStrokeNormal}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <BulletDecorator SnapsToDevicePixels="true" Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}" IsChecked="{TemplateBinding IsChecked}"
                                 RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
                        </BulletDecorator.Bullet>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="true">
                            <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
                            <Setter Property="Padding" Value="2,0,0,0"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

代码2. Luna主题Normal配色方案下，CheckBox的默认Template

从上面两段代码可以看出，Classic主题下的CheckBox的勾的颜色绑定到了CheckBox本身的Foreground属性上，但是Luna主题下的没有这样做（Luna下的CheckBox的勾是用BulletChrome画的）。也许微软这样做有自己的考虑，但是从目前的结果来看，没有带来实现的好处，却带来了不小的麻烦，因为这个小问题并不是想象中那么容易完美解决的。

给出几个方案。

1. 不把CheckBox的Foreground与ListBoxItem的Foreground绑定。然后解决CheckBox黑色文字与蓝条的冲突问题。方案之一就是改变蓝条成灰条，橙条，颜色随你。

2. 重写Classic主题下CheckBox的Template，可以，首先这个Template的代码不算少，而且你还要写代码去在程序启动时判断是否要加载这个特殊的Template。这个还要读注册表。

3. 算了，我不要蓝条还不行吗？有时客户或是公司的UX和QA会不同意，他们不会因为你不好做就原谅你的。除非你很能忽悠。

好了，问题讲完了。不过这里的CheckBox只是一个例子，WPF里类似的问题还是不少的。比如很多控件的FocusVisualStyle根本无效。这个将在之后的文章中介绍。

已经给WPF找了10个Bug个了，当然是按自己的标准找的Bug（被QA、UX和客户磨练出来了），也许有人不接受，认为这些不算是Bug，但是讨论这个实在没有什么意义。这个系列文章的主要目标，是为了给计划使用和正在使用WPF进行项目开发的人，一些提示，在自己遇到的陷阱边上立个牌子，让大家少走一些弯路，毕竟这些问题在微软的文档大都是没有涉及到的，能达到这个目标就足够了。

在这里更要感谢曾经给过我支持和鼓励的、关注着这个系列文章的园友们，没有你们的支持，我也坚持不到第10篇的。谢谢大家。

(2009-7-25 10:00)补充一下：为什么说这个问题不小呢？除了不太好解决外，之前软件开发，只要考虑各个系统，QA们要在不同系统上测试。现在好了，还要在不同主题下测。-_-