WPF实现Win10单选框CheckBox效果

重写控件模板

<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{TemplateBinding Content}" Grid.Column="1" Name="ShowText" Margin="5,0,0,0"/>
                            <Rectangle Name="Rect"  Grid.Column="0" Height="{Binding ElementName=ShowText,Path=ActualHeight}"
                                       Width="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"/>
                            <TextBlock Text="L" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" Foreground="White">
                                <TextBlock.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                        <SkewTransform AngleY="0" AngleX="0"/>
                                        <RotateTransform Angle="45"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Grid>
                </Setter.Value>
            </Setter>

触发器

<Trigger Property="IsChecked" Value="true">
                                <Setter Property="Fill" Value="#555ED4" TargetName="Rect"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter Property="Fill" Value="Lightgray" TargetName="Rect"/>
                            </Trigger>

当IsChecked为True时填充个颜色指向Rectangle

引用资源样式

<CheckBox IsChecked="True" Content="记住密码" 
                              Height="15" Style="{StaticResource checkboxStyle}"
                              Foreground="Gray"/>

效果图

完整代码

    <Style x:Key="checkboxStyle" TargetType="CheckBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{TemplateBinding Content}" Grid.Column="1" Name="ShowText" Margin="5,0,0,0"/>
                        <Rectangle Name="Rect"  Grid.Column="0" Height="{Binding ElementName=ShowText,Path=ActualHeight}"
                                   Width="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"/>
                        <TextBlock Text="L" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" Foreground="White">
                            <TextBlock.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                    <SkewTransform AngleY="0" AngleX="0"/>
                                    <RotateTransform Angle="45"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </TextBlock.RenderTransform>
                        </TextBlock>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Fill" Value="#555ED4" TargetName="Rect"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Fill" Value="Lightgray" TargetName="Rect"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Cursor" Value="Hand"/>
    </Style>