如何给CheckBox设定控件模板

参考资料：
1. http://technet.microsoft.com/zh-cn/library/hh465374
2. http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465045.aspx

先看下面我根据参考资料1修改后的代码，便于理解。

<!-- HH Add a new ControlTemplate for checkbox -->
<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox" >
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding 

BorderThickness}" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" 

Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="CheckGlyph"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" 

Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="IndeterminateGlyph"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="25"/>
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="NormalRectangle" Fill="White" Stroke="Black" 

StrokeThickness="1" 
                                   UseLayoutRounding="True" Height="21" Width="21"/>
                        <!-- Create an X to indicate that the CheckBox is selected. -->
                        <Path x:Name="CheckGlyph" Data="M103,240 L111,240 119,248 127,240 135,240 123,252 

135,264 127,264 119,257 111,264 103,264 114,252 z"
                              Fill="Black" FlowDirection="LeftToRight" Height="14" Width="16" Opacity="0" 

Stretch="Fill"/>
                        <!-- Create an Ellipse to indicate that the CheckBox is in an indeterminate 

state. -->
                        <Ellipse x:Name="IndeterminateGlyph" Fill="Black" Height="12" Width="12" 

Opacity="0"/>
                        
                        <ContentPresenter Grid.Row="1" 

x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Content="{TemplateBinding Content}" Margin="{TemplateBinding 

Padding}"
                                          HorizontalAlignment="{TemplateBinding 

HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding 

VerticalContentAlignment}"/>
                    </Grid>
                </Border>
            </ControlTemplate>

具体实现的界面图，可以看参考资料1，那里面很详细。
注意点：
1. 请看Path以及Ellipse的Opacity属性值为0，表示默认情况下这2个属性不显示。
2. Storyboard表示控件模板中元素的外观。当控件切换到 VisualState.Name 属性指定的状态时，Storyboard 就会开

始。当控件退出该状态时，Storyboard 就会停止。
3. 当控件状态(即VisualState)切换到Checked的时候，Storyboard.TargetProperty="Opacity以及

Storyboard.TargetName="CheckGlyph"表示设置下面Grid的元素CheckGlyph中的Opacity为1，这样就将
CheckGlyph显示出来了。其他原理类似。

 4.
Stroke  ：说明如何绘制形状的轮廓。
StrokeThickness  ：说明形状轮廓的粗细。
Fill  ：说明如何绘制形状的内部。

///////////////////
新手使用方法：
1. 新建一个Blank App(XAML)，修改MainPage.xaml为：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" 

Margin="68,361,1223,328" Height="79"/>
</Grid>

 

2. 再将上述
<ControlTemplate ...> ... </<ControlTemplate >
部分代码添加到App.xaml中的<ResourceDictionary></ResourceDictionary>之间。