# WPF实现Win10单选框CheckBox效果

### 重写控件模板

```csharp
<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>


```

### 触发器

```csharp
<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

### 引用资源样式

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

### 效果图

![](https://937995404-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMTM8NYe0uekudlCMKb%2F-Ma2TLZtalbwunySJtqg%2F-Ma2UKt5TJHDCdOWnCcp%2Fimage.png?alt=media\&token=ccd9c873-4159-4b45-9483-150eea1088b6)

### 完整代码

```csharp
    <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>

```