WPF 基础控件之CheckBox样式

Posted dotNET跨平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WPF 基础控件之CheckBox样式相关的知识,希望对你有一定的参考价值。

WPF开发者QQ群:340500857

       由于微信群人数太多入群请添加小编微信号

 yanjinhuawechatW_Feng_aiQ 邀请入群

 需备注WPF开发者 

 PS:有更好的方式欢迎推荐。

支持Nuget

Install-Package WPFDevelopers.Minimal -Version 3.0.0

01

代码如下

一、创建 Styles.CheckBox.xaml 代码如下。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/>
        <ResourceDictionary Source="../Themes/Basic/Animations.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="x:Type CheckBox" BasedOn="StaticResource ControlBasicStyle">
        <Setter Property="FocusVisualStyle" Value="x:Null" />
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type CheckBox">
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Border CornerRadius="Binding ElementName=PART_Border,Path=CornerRadius"
                                Background="Binding ElementName=PART_Border,Path=Background">
                                <Border x:Name="PART_Border" 
                                            Width="16" Height="16"
                                            CornerRadius="3"
                                            BorderThickness="1"
                                            BorderBrush="DynamicResource BaseSolidColorBrush"
                                            Background="DynamicResource WhiteSolidColorBrush">
                                    <Grid>
                                        <Path x:Name="PART_CheckMark" SnapsToDevicePixels="False" 
                                              VerticalAlignment="Center" HorizontalAlignment="Center"
                                              Data="StaticResource PathCheckMark"
                                              RenderTransformOrigin=".5,.5"
                                              Stretch="Fill" Fill="DynamicResource WhiteSolidColorBrush">
                                            <Path.RenderTransform>
                                                <ScaleTransform ScaleX="0" ScaleY="0"/>
                                            </Path.RenderTransform>
                                        </Path>
                                        <Rectangle Width="6" Height="2" 
                                                       VerticalAlignment="Center" 
                                                       HorizontalAlignment="Center"
                                                       x:Name="PART_InderminateMark"
                                                       RenderTransformOrigin=".5,.5"
                                                       Fill="DynamicResource PrimaryNormalSolidColorBrush">
                                            <Rectangle.RenderTransform>
                                                <ScaleTransform ScaleX="0"/>
                                            </Rectangle.RenderTransform>
                                        </Rectangle>
                                    </Grid>
                                </Border>
                            </Border>
                        </BulletDecorator.Bullet>
                        <ContentPresenter x:Name="PART_ContentPresenter"
                                          Focusable="False"
                                          HorizontalAlignment="TemplateBinding HorizontalContentAlignment" 
                                          Margin="2,0,0,0" RecognizesAccessKey="True" 
                                          SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" 
                                          VerticalAlignment="TemplateBinding VerticalContentAlignment"
                                          TextElement.Foreground="DynamicResource PrimaryTextSolidColorBrush">
                        </ContentPresenter>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        
                                        <DoubleAnimation Storyboard.TargetName="PART_CheckMark"
                                                         Storyboard.TargetProperty="(Path.RenderTransform).(ScaleTransform.ScaleX)" 
                                                         To=".7" Duration="00:00:.2"
                                                         EasingFunction="StaticResource ExponentialEaseOut"/>

                                        <DoubleAnimation Storyboard.TargetName="PART_CheckMark"
                                                         Storyboard.TargetProperty="(Path.RenderTransform).(ScaleTransform.ScaleY)" 
                                                         To=".5" Duration="00:00:.2"
                                                         EasingFunction="StaticResource ExponentialEaseOut"/>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked" />
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                       
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" TargetName="PART_Border" Value="DynamicResource PrimaryNormalSolidColorBrush"/>
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="DynamicResource PrimaryNormalSolidColorBrush"/>
                            <Setter Property="TextElement.Foreground" TargetName="PART_ContentPresenter" Value="DynamicResource PrimaryNormalSolidColorBrush"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="x:Null">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="PART_BeginStoryboardIsCheckedNull">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_InderminateMark"
                                                         Storyboard.TargetProperty="(Path.RenderTransform).(ScaleTransform.ScaleX)" 
                                                         To="1" Duration="00:00:.2"
                                                         EasingFunction="StaticResource ExponentialEaseOut"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="PART_BeginStoryboardIsCheckedNull"></RemoveStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsChecked" Value="False" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="DynamicResource PrimaryMouseOverSolidColorBrush"/>
                            
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

二、使用 Styles.CheckBox.xaml 代码如下。

<TextBlock Text="Checkbox" FontSize="20" Margin="0,20,0,0"/>
                <WrapPanel Margin="0,10">
                    <CheckBox Content="Option A"/>
                    <CheckBox Content="Option B" Margin="10,0" IsChecked="True"/>
                    <CheckBox Content="Option C" IsChecked="x:Null"/>
                    <CheckBox Content="Option D" Margin="10,0" IsEnabled="False"/>
                </WrapPanel>

02


效果预览

鸣谢素材提供者element

源码地址如下

Github:https://github.com/WPFDevelopersOrg

Gitee:https://gitee.com/WPFDevelopersOrg

https://gitee.com/WPFDevelopersOrg/WPFDevelopers.Minimal

https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal

WPF开发者QQ群: 340500857 

Github:https://github.com/WPFDevelopersOrg

出处:https://www.cnblogs.com/yanjinhua

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/WPFDevelopersOrg

扫一扫关注我们,

更多知识早知道!

点击阅读原文可跳转至源代码

以上是关于WPF 基础控件之CheckBox样式的主要内容,如果未能解决你的问题,请参考以下文章

WPF 基础控件之 ToggleButton 样式

WPF 基础控件之 Slider 样式

WPF 基础控件之 GroupBox样式

WPF 基础控件之 RadioButton 样式

WPF 基础控件之 DataGrid 样式

WPF 有人知道Checkbox样式自定义