标签：
How create WPF CheckBox style and customize it. The CheckBox style is inspired by Android design.
CheckBox design:
Grid with relative size of columns and rows makes possible change CheckBox size using Height and Width 
. Or you can use Viewbox.
Design of CheckBox style:
CheckBox states:
a) checked, disable
b) checked
c) indeterminate, disable
d) indeterminate
e) unchecked
f) pressed
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> <Setter Property="SnapsToDevicePixels" Value="true" /> <Setter Property="OverridesDefaultStyle" Value="true" /> <Setter Property="Height" Value="30" /> <Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type CheckBox}"> <BulletDecorator> <BulletDecorator.Bullet> <Grid Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}" MinHeight="30" MinWidth="30" ShowGridLines="False"> <Grid.ColumnDefinitions> <ColumnDefinition Width="4*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="4*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="3*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="4*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="4*" /> </Grid.RowDefinitions> <Border Name="MainBorder" Grid.ColumnSpan="9" Grid.RowSpan="9" CornerRadius="4" BorderThickness="1" Background="Transparent" /> <Border Name="InnerBorder" Grid.Column="1" Grid.ColumnSpan="5" Grid.Row="2" Grid.RowSpan="5" BorderThickness="1" BorderBrush="#808080" /> <Path Name="InnerPath" Grid.Column="1" Grid.ColumnSpan="5" Grid.Row="2" Grid.RowSpan="5" Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75" Stretch="Fill" Stroke="#808080"/> <Path Name="CheckMark" Grid.Column="2" Grid.ColumnSpan="5" Grid.Row="1" Grid.RowSpan="5" Opacity="0" Data="M9.07743946676476E-09,4.31805768640244L4.68740335877841,8.86361158398516C4.68740335877841,8.86361158398516,16.3281249985376,-2.42451336648723,16.3281249985376,-2.42451336648723L14.0622100581796,-4.77304938341948 4.68740335877846,4.31805791992662 2.22656251699567,1.93164208562579z" Fill="#3babe3" Stretch="Fill" Stroke="#3babe3" /> <Path Name="InderminateMark" Grid.Column="3" Grid.Row="4" Data="M0,4 L1,5 5,1 4,0" Opacity="0" Stretch="Fill" StrokeThickness="0" Fill="#808080" /> </Grid> </BulletDecorator.Bullet> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="1" /> </Storyboard> </VisualState> <VisualState x:Name="Unchecked" > <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="0" /> </Storyboard> </VisualState> <VisualState x:Name="Indeterminate"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InderminateMark" Duration="0:0:0.2" To="1" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter Margin="4,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True" /> </BulletDecorator> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="InnerBorder" Property="Visibility" Value="Collapsed" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="MainBorder" Property="Background" Value="#81d2eb" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="CheckMark" Property="Fill" Value="#cccccc" /> <Setter TargetName="CheckMark" Property="Stroke" Value="#cccccc" /> <Setter TargetName="InnerPath" Property="Stroke" Value="#cccccc" /> <Setter TargetName="InderminateMark" Property="Fill" Value="#cccccc" /> <Setter TargetName="InnerBorder" Property="BorderBrush" Value="#cccccc" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter></Style> |
|
1
2
3
4
5
6
7
8
9
10
|
<Style x:Key="MyFocusVisualStyte" > <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle x:Name="FocusStyle" StrokeDashArray="4 4" RadiusX="5" RadiusY="5" Fill="Transparent" Stroke="#81d2eb" StrokeThickness="1" /> </ControlTemplate> </Setter.Value> </Setter></Style> |
标签：
原文地址：http://www.cnblogs.com/aquarius20th/p/4877012.html
