一、样式一:方型

1、样式代码:

<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
            <Setter Property="Background" Value="#FF26405B"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <Grid Background="Transparent">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition  Width="auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Viewbox Width="{TemplateBinding Height}" Height="{TemplateBinding Height}">
                                <Grid>
                                    <Path Data="M1.5,16 C1.5,7.9918711 7.9918711,1.5 16,1.5 L69,1.5 C77.008129,1.5 83.5,7.9918711 83.5,16 L83.5,69 C83.5,77.008129 77.008129,83.5 69,83.5 L16,83.5 C7.9918711,83.5 1.5,77.008129 1.5,69 z"  Height="85"  Stretch="Fill" Stroke="{TemplateBinding Background}" StrokeThickness="3" Width="85"/>
                                    <Path x:Name="path" Data="M210,180 L239.5,199.5 269.5,154.5 234.5,184.5 z" Fill="{TemplateBinding Background}"  Height="46"  Stretch="Fill"  Width="60.5" RenderTransformOrigin="0.5,0.5">
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="0" ScaleY="0"/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                    </Path>
                                </Grid>
                            </Viewbox>
                            <ContentPresenter Grid.Column="1" Margin="5 0 0 0" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard >
                                        <Storyboard >
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard >
                                        <Storyboard >
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2、效果:

WPF-个性选择框_Group

二、样式二:圆型

1、样式代码:

<Window.Resources>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border x:Name="innerBorder">
                            <Ellipse Fill="#FFA1FF" Stroke="#BED9F4" StrokeThickness="1.7" Stretch="Fill" x:Name="statusLight" Width="15" Height="14" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="statusLight" Property="Fill" Value="#FFA1FF" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="statusLight" Property="Fill" Value="#ffffff" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

2、效果:

  后补

 

作者:꧁执笔小白꧂