WPF 基础控件之CheckBox样式

最新推荐文章于 2025-05-01 08:00:00 发布

转载最新推荐文章于 2025-05-01 08:00:00 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654088077&idx=6&sn=115edad5dd143f066fe26387e15f5079&chksm=80d80fd8b7af86ce9bc35f45af20f8dae0459357b51ba0ade0f0fa7579ff8a140897a03078fd&scene=126&&sessionid=0

文章标签：

#javascript #vue #github #css #html

WPF开发者QQ群：340500857

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

yanjinhuawechat 或 W_Feng_aiQ 邀请入群

需备注WPF开发者

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

支持Nuget

Install-Package WPFDevelopers.Minimal -Version 3.0.0

—

代码如下

一、创建 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>

—

效果预览

鸣谢素材提供者 - 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 国际」许可协议进行许可。