继续聊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代码。

怎么样，漂亮不？