WPF的自定义复选框样式

Question

I would like to skin a wpf default checkbox to something custom. Since it does not really make sense to start off a entirely new control, i'd like to override the Windows Chrome template binding for the Bulletchrome sub component of the checkbox. However I cannot do this like I can with checkboxes for example.

tried using something like this to override the default style, but it seems to not compile like this

   <Style x:Key="cb_BULLETSTYLE" TargetType="{x:Type BulletDecorator}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
 <ControlTemplate TargetType="{x:Type BulletDecorator}">
  <Border x:Name="Chrome" SnapsToDevicePixels="true" BorderBrush="{x:Null}" BorderThickness="0">
  </Border>
   <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
     <Setter Property="Background" TargetName="Chrome" Value="#FF4C4C4C"/>
    </Trigger>
   </ControlTemplate.Triggers>
 </ControlTemplate>
</Setter.Value>
</Setter>

Answer 1

Have a look at this

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication3.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480" Background="white">

<LinearGradientBrush x:Key="LinearGradient_Orange_H" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FFF9FF09" Offset="0"/>
    <GradientStop Color="#FFF7DE25" Offset="0.959"/>
    <GradientStop Color="#FFFF7000" Offset="0.033"/>
    <GradientStop Color="#FFFF7200" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Horizontal_Gradient" EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#CCC" Offset="0.0"/>
    <GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
    <LinearGradientBrush x:Key="Vertical_Gradient" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#CCC" Offset="0.0"/>
    <GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>

<!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FFF" Offset="0.0"/>
    <GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<!-- LightBrush is used for content areas such as Menu, Tab Control background -->
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0" x:Key="LightBrush">
    <GradientStop Color="#FFF" Offset="0.0"/>
    <GradientStop Color="#EEE" Offset="1.0"/>
</LinearGradientBrush>

<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">

                <!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <Grid Width="13" Height="13">
                            <Border x:Name="Border" Background="{DynamicResource LightBrush}" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1"/>
                            <Path x:Name="CheckMark" Stroke="{DynamicResource Normal_Background}" StrokeThickness="3" SnapsToDevicePixels="False" Data="M1.5000001,1.5833334 L9.7920001,9.6666667 M1.5420001,9.6666667 L9.7083333,1.5000001" Margin="0.875,0.895,0.833,0.938" ClipToBounds="False" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>
                        </Grid>
                    </BulletDecorator.Bullet>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                </BulletDecorator>

                <!-- This uses Visibility to hide and show the CheckMark on IsChecked -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="false">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" Value="{DynamicResource Normal_Background}" TargetName="Border"/>
                        <Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" Value="{DynamicResource Vertical_Gradient}" TargetName="Border"/>
                        <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>