WPF 控件 (五、CheckBox)

一、修改颜色

1. Style 修改√的颜色

    <Style x:Key="CheckBoxWithColor" TargetType="CheckBox">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <StackPanel Orientation="Horizontal">
                        <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Path x:Name="opt" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="Purple" Margin="1" Opacity="0" Stretch="Uniform"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Opacity" Value="1" TargetName="opt"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Opacity" Value="0" TargetName="opt"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

2. Style 修改box的颜色

    <Style x:Key="CheckBoxWithColor2" TargetType="CheckBox">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <StackPanel Orientation="Horizontal">
                        <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Path x:Name="opt" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="White" Margin="1" Opacity="0" Stretch="Uniform"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" Value="Purple" TargetName="checkBoxBorder"/>
                            <Setter Property="Opacity" Value="1" TargetName="opt"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Background" Value="White" TargetName="checkBoxBorder"/>
                            <Setter Property="Opacity" Value="0" TargetName="opt"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

二、带一点动画

1. Style 1

复选框中的√
选中时 会慢慢显示
取消选中 会慢慢消失
同时伴随有 颜色的渐变

    <Style x:Key="CheckBoxWithAnimation" TargetType="CheckBox">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <StackPanel Orientation="Horizontal">
                        <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid Width="13" Height="13">
                                <Path x:Name="opt" Width="0" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="Purple" Margin="1" Stretch="Uniform"/>
                            </Grid>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation To="9" Storyboard.TargetName="opt" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <ColorAnimation To="Purple" Storyboard.TargetName="opt" Duration="0:0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation To="0" Storyboard.TargetName="opt" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <ColorAnimation To="White" Storyboard.TargetName="opt" Duration="0:0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

2. Style2

    <Style x:Key="CheckBoxWithAnimation2" TargetType="CheckBox">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <StackPanel Orientation="Horizontal">
                        <Border x:Name="checkBoxBorder" Height="13" Width="13" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Path x:Name="opt" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="White" Margin="1" Width="0" Stretch="Uniform"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation To="9" Storyboard.TargetName="opt" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <ColorAnimation To="Purple" Storyboard.TargetName="checkBoxBorder" Duration="0:0:0:0.5" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation To="0" Storyboard.TargetName="opt" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <ColorAnimation To="White" Storyboard.TargetName="checkBoxBorder" Duration="0:0:0:0.5" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

三、Demo

1. xaml

   <WrapPanel>
       <CheckBox Content="默认" Height="20" Foreground="White"/>
       <CheckBox Content="颜色" Height="20" Foreground="White" Style="{StaticResource CheckBoxWithColor}"/>
       <CheckBox Content="颜色2" Height="20" Foreground="White" Style="{StaticResource CheckBoxWithColor2}"/>
       <CheckBox Content="动画" Height="20" Width="50" Foreground="White" Style="{StaticResource CheckBoxWithAnimation}"/>
       <CheckBox Content="动画2" Height="20" Width="50" Foreground="White" Style="{StaticResource CheckBoxWithAnimation2}"/>
   </WrapPanel>

2. 效果