CheckBox自定义样式

效果：

xmal代码：

 1 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
 2         <Setter Property="SnapsToDevicePixels" Value="true" />
 3         <Setter Property="OverridesDefaultStyle" Value="False" />
 4         <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
 5         <Setter Property="Height" Value="25"/>
 6         <Setter Property="IsChecked" Value="False"/>
 7         <Setter Property="Margin" Value="0,20"/>
 8         <Setter Property="Template">
 9             <Setter.Value>
10                 <ControlTemplate TargetType="CheckBox">
11                     <Grid>
12                         <Grid.ColumnDefinitions>
13                             <ColumnDefinition Width="Auto"/>
14                             <ColumnDefinition Width="*"/>
15                         </Grid.ColumnDefinitions>
16                         <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
17                             <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
18                             <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
19                             <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
20                                 <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
21                                 <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
22                             </Grid>
23                         </Grid>
24                         <TextBlock Grid.Column="1" Text="AAAA" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
25                     </Grid>
26                     <ControlTemplate.Triggers>
27                         <Trigger Property="IsChecked" Value="True">
28                             <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
29                             <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
30                             <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
31                             <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
32                         </Trigger>
33                     </ControlTemplate.Triggers>
34                 </ControlTemplate>
35             </Setter.Value>
36         </Setter>
37     </Style>

加上动画的xaml代码

 1 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
 2         <Setter Property="SnapsToDevicePixels" Value="true" />
 3         <Setter Property="OverridesDefaultStyle" Value="False" />
 4         <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
 5         <Setter Property="Height" Value="25"/>
 6             <Setter Property="IsChecked" Value="{Binding IsChecked}"/>
 7         <Setter Property="Margin" Value="0,20"/>
 8         <Setter Property="Template">
 9             <Setter.Value>
10                 <ControlTemplate TargetType="CheckBox">
11                     <Grid x:Name="aaaa">
12                         <Grid.ColumnDefinitions>
13                             <ColumnDefinition Width="Auto"/>
14                             <ColumnDefinition Width="*"/>
15                         </Grid.ColumnDefinitions>
16                         <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
17                             <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
18                             <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
19                                 <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
20                                     <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
21                                     <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
22                                     <Grid.RenderTransform>
23                                         <RotateTransform x:Name="CheckBoxTransform" Angle="0" CenterX="10" CenterY="10"></RotateTransform>
24                                     </Grid.RenderTransform>
25                                 </Grid>
26                             </Grid>
27                         <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
28                     </Grid>
29                     <ControlTemplate.Triggers>
30                         <Trigger Property="IsChecked" Value="True">
31                             <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
32                             <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
33                             <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
34                             <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
35                         </Trigger>
36                         <EventTrigger RoutedEvent="Click">
37                             <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
38                                 <Storyboard TargetName="CheckBoxTransform" TargetProperty="Angle">
39                                     <DoubleAnimation From="0" To="360" Duration="0:0:0.1"></DoubleAnimation>
40                                 </Storyboard>
41                             </BeginStoryboard>
42                         </EventTrigger>
43                     </ControlTemplate.Triggers>
44                 </ControlTemplate>
45             </Setter.Value>
46         </Setter>
47     </Style>

 

 

 

 

摘自：https://www.cnblogs.com/kybs0/p/5850733.html

posted @ 2018-01-16 14:51  liu_xh  阅读(707)  评论(0)  编辑  收藏  举报