WPF 自定义CheckBox样式

2016-09-15 12:23:08来源:cnblogs.com作者:WinterFish人点击

自定义CheckBox样式,mark一下,方便以后参考复用

设计介绍:

1、一般CheckBox模板太难看了,肯定要重写其中的模板

2、模板状态为未选中状态和选中状态,设置为默认未选中就好了。

  默认状态,设置边框、透明度等

  选中的话,我们可以设置√和背景。

    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">        <Setter Property="SnapsToDevicePixels" Value="true" />        <Setter Property="OverridesDefaultStyle" Value="False" />        <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />        <Setter Property="Height" Value="25"/>        <Setter Property="IsChecked" Value="False"/>        <Setter Property="Margin" Value="0,20"/>        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="CheckBox">                    <Grid>                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="Auto"/>                            <ColumnDefinition Width="*"/>                        </Grid.ColumnDefinitions>                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">                            <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>                            <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>                            <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">                                <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>                                <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>                            </Grid>                        </Grid>                        <TextBlock Grid.Column="1" Text="AAAA" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>                    </Grid>                    <ControlTemplate.Triggers>                        <Trigger Property="IsChecked" Value="True">                            <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>                            <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>                            <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>                            <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

当然如果需要点动画的话,可以添加个Strory,也是不错的。例如

    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">        <Setter Property="SnapsToDevicePixels" Value="true" />        <Setter Property="OverridesDefaultStyle" Value="False" />        <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />        <Setter Property="Height" Value="25"/>            <Setter Property="IsChecked" Value="{Binding IsChecked}"/>        <Setter Property="Margin" Value="0,20"/>        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="CheckBox">                    <Grid x:Name="aaaa">                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="Auto"/>                            <ColumnDefinition Width="*"/>                        </Grid.ColumnDefinitions>                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">                            <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>                            <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>                                <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">                                    <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>                                    <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>                                    <Grid.RenderTransform>                                        <RotateTransform x:Name="CheckBoxTransform" Angle="0" CenterX="10" CenterY="10"></RotateTransform>                                    </Grid.RenderTransform>                                </Grid>                            </Grid>                        <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>                    </Grid>                    <ControlTemplate.Triggers>                        <Trigger Property="IsChecked" Value="True">                            <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>                            <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>                            <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>                            <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>                        </Trigger>                        <EventTrigger RoutedEvent="Click">                            <BeginStoryboard HandoffBehavior="SnapshotAndReplace">                                <Storyboard TargetName="CheckBoxTransform" TargetProperty="Angle">                                    <DoubleAnimation From="0" To="360" Duration="0:0:0.1"></DoubleAnimation>                                </Storyboard>                            </BeginStoryboard>                        </EventTrigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台