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

柔情只为你懂 2022-06-16 07:41 274阅读 0赞

上一篇文章中谈到了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.    
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.                   
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代码。

![0_1321189526CLC7.gif][]

怎么样，漂亮不？

[0_1321189526CLC7.gif]: /images/20220616/59aa7154321e4218a829fde8613396ac.png