继续聊WPF——自定义CheckBox控件外观

  

上一篇文章中谈到了BulletDecorator控件，就是为自定义CheckBox控件的模板做准备，因为CheckBox需要比较严格的布局，正好，BulletDecorator控件就合适了，该控件的布局是有项目列表，排列起来好办很多了。

 

第一步，先建立一项资源，就是控件的聚焦样式，即当你在窗体中不断按Tab键使控件获取焦点时的样式，后面要用到。

1. <!--当控件获得键盘焦点时的样式-->  
2. <Style x:Key="FocusStyle">  
3.     <Setter Property="Control.Template">  
4.         <Setter.Value>  
5.             <ControlTemplate>  
6.                 <Rectangle Stroke="Red" StrokeThickness="1"/>  
7.             </ControlTemplate>  
8.         </Setter.Value>  
9.     </Setter>  
10. </Style>  

第二步，写好CheckBox的样式。

1. <!-- 
2.     CheckBox的样式 
3. -->  
4. <Style TargetType="{x:Type CheckBox}">  
5.     <Setter Property="OverridesDefaultStyle" Value="True"/>  
6.     <Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}"/>  
7.     <Setter Property="SnapsToDevicePixels" Value="True"/>  
8.     <Setter Property="Foreground" Value="White"/>  
9.     <Setter Property="FontSize" Value="16"/>  
10.     <Setter Property="Template">  
11.         <Setter.Value>  
12.             <ControlTemplate TargetType="{x:Type CheckBox}">  
13.                 <BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">  
14.                     <BulletDecorator.Bullet>  
15.                         <Border x:Name="bd"  
16.                                 BorderThickness="1"  
17.                                 BorderBrush="Red"  
18.                                 MinHeight="15"  
19.                                 MinWidth="15"  
20.                                 VerticalAlignment="Center">  
21.                             <Border.Background>  
22.                                 <LinearGradientBrush StartPoint="0,0"  
23.                                                      EndPoint="1,1">  
24.                                     <GradientStop Color="LightGray" Offset="0.2"/>  
25.                                     <GradientStop Color="White" Offset="1"/>  
26.                                 </LinearGradientBrush>  
27.                             </Border.Background>  
28.                             <Path x:Name="cp" Width="12" Height="12"  
29.                                   Stroke="Blue"  
30.                                   StrokeThickness="3"/>  
31.                         </Border>  
32.                     </BulletDecorator.Bullet>  
33.                     <ContentPresenter Margin="2,0"/>  
34.                 </BulletDecorator>  
35.                 <!-- 
36.                     控件触发器 
37.                 -->  
38.                 <ControlTemplate.Triggers>  
39.                     <Trigger Property="IsChecked" Value="True">  
40.                         <!-- 画上一个勾 -->  
41.                         <Setter TargetName="cp" Property="Data"  
42.                                 Value="M 0,6 L 6,12 12,0"/>  
43.                         <Setter Property="Foreground" Value="LightGreen"/>  
44.                     </Trigger>  
45.                     <Trigger Property="IsMouseOver" Value="True">  
46.                         <Setter TargetName="bd" Property="Background">  
47.                             <Setter.Value>  
48.                                 <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
49.                                     <GradientStop Color="Orange" Offset="0.12"/>  
50.                                     <GradientStop Color="Yellow" Offset="0.92"/>  
51.                                 </LinearGradientBrush>  
52.                             </Setter.Value>  
53.                         </Setter>  
54.                     </Trigger>  
55.                 </ControlTemplate.Triggers>  
56.             </ControlTemplate>  
57.         </Setter.Value>  
58.     </Setter>  
59. </Style>  

 

第三步，把窗体默认的Grid控件去掉，为了更好地布局，应使用StatcPanel控件。

1. <StackPanel Orientation="Vertical" Margin="20,20,20,20">  
2.     <CheckBox Content="苹果"/>  
3.     <CheckBox Content="鸡蛋"/>  
4.     <CheckBox Content="白菜"/>  
5.     <CheckBox Content="萝卜"/>  
6.     <CheckBox Content="豆浆"/>  
7.     <CheckBox Content="咸菜"/>  
8.     <CheckBox Content="炒饭"/>  
9.     <CheckBox Content="烧鸭饭"/>  
10.     <CheckBox Content="叉烧饭"/>   
11. </StackPanel>  

 

好，完事，现在来看看效果吧。

 当项目被选中后，字体自动变为绿色，请参照上面的XAML代码。

怎么样，漂亮不？