效果很简单,直接上图
实现的方式很简单,直接上代码
<Window.Resources>
<!--当控件获得键盘焦点时的样式-->
<Style x:Key="FocusStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Red" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--CheckBox样式-->
<Style TargetType="{x:Type CheckBox}">
<Setter Property="OverridesDefaultStyle" Value="False"></Setter>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">
<BulletDecorator.Bullet>
<Border x:Name="bd" BorderThickness="1" BorderBrush="Red" MinHeight="15" MinWidth="15" VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightGray" Offset="0.2"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Path x:Name="cp" Width="12" Height="12" Stroke="Blue" StrokeThickness="3"></Path>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="cp" Property="Data"
Value="M 0,6 L 6,12 12,0"/>
<Setter Property="Foreground" Value="LightGreen"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Orange" Offset="0.12"/>
<GradientStop Color="Yellow" Offset="0.92"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type CheckBox}" x:Key="wpStyle">
<Setter Property="OverridesDefaultStyle" Value="False"></Setter>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">
<BulletDecorator.Bullet>
<Grid MinWidth="45" MinHeight="20">
<Rectangle Width="45" Height="15" Stroke="White" Fill="Black" x:Name="rc1" StrokeThickness="2"/>
<Rectangle Height="20" Width="15" Stroke="White" Fill="White" HorizontalAlignment="Left" x:Name="rc2"/>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="rc1" Property="Fill" Value="Green"/>
<Setter TargetName="rc2" Property="HorizontalAlignment" Value="Right"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical" Margin="20,20,20,20" Background="Black">
<CheckBox Content="苹果"/>
<CheckBox Content="鸡蛋"/>
<CheckBox Content="白菜"/>
<CheckBox Style="{StaticResource wpStyle}" Content="nihao" Margin="2,0,0,0"/>
</StackPanel>
这里要感谢某位姓周的大神吧,看到他的博文才想到的思路,感谢哈!