WPF之CheckBox样式

最新推荐文章于 2025-07-15 16:27:30 发布
原创 最新推荐文章于 2025-07-15 16:27:30 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#checkbox #wpf #控件样式

本文介绍了一种使用WPF技术实现QQ风格复选框的方法，详细展示了如何通过自定义样式和模板来创建具备动画效果的复选框控件，并针对不同状态如鼠标悬停、选中等进行了外观和行为上的定制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  <Style x:Key="qq.checkbox"
           TargetType="{x:Type CheckBox}">
        <Setter Property="FocusVisualStyle"
                Value="{DynamicResource FocusVisual}" />
        <Setter Property="Background"
                Value="#FFFFFF" />
        <Setter Property="BorderBrush"
                Value="#ABADB3" />
        <Setter Property="Foreground"
                Value="#656565" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Padding"
                Value="5,4" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="AyWhenCheckedBox">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                           Storyboard.TargetName="indeterminateMark">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                           Storyboard.TargetName="optionMark">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="0">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <CircleEase EasingMode="EaseOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.15"
                                                      Value="17" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                      Value="11" />
                            </DoubleAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Padding)"
                                                              Storyboard.TargetName="CheckOutBorder">
                                <EasingThicknessKeyFrame KeyTime="0:0:0.1"
                                                         Value="4" />
                                <EasingThicknessKeyFrame KeyTime="0:0:0.15"
                                                         Value="1" />
                                <EasingThicknessKeyFrame KeyTime="0:0:0.3"
                                                         Value="4" />
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="AyWhenCheckBoxUnCheck">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                           Storyboard.TargetName="optionMark">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="11" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.1"
                                                      Value="17" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                      Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Padding)"
                                                              Storyboard.TargetName="CheckOutBorder">
                                <EasingThicknessKeyFrame KeyTime="0"
                                                         Value="4" />
                                <EasingThicknessKeyFrame KeyTime="0:0:0.1"
                                                         Value="1" />
                                <EasingThicknessKeyFrame KeyTime="0:0:0.15"
                                                         Value="4" />
                            </ThicknessAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                           Storyboard.TargetName="indeterminateMark">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="AyCheckBoxNull">
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                              Storyboard.TargetName="nullMark">
                                <EasingThicknessKeyFrame KeyTime="0"
                                                         Value="9"></EasingThicknessKeyFrame>
                                <EasingThicknessKeyFrame KeyTime="0:0:0.15"
                                                         Value="1" />
                                <EasingThicknessKeyFrame KeyTime="0:0:0.3"
                                                         Value="3" />
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="AyCheckBoxNullExit">
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                              Storyboard.TargetName="nullMark">
                                <EasingThicknessKeyFrame KeyTime="0"
                                                         Value="3">
                                    <EasingThicknessKeyFrame.EasingFunction>
                                        <CircleEase EasingMode="EaseOut" />
                                    </EasingThicknessKeyFrame.EasingFunction>
                                </EasingThicknessKeyFrame>
                                <EasingThicknessKeyFrame KeyTime="0:0:0.1"
                                                         Value="1" />
                                <EasingThicknessKeyFrame KeyTime="0:0:0.3"
                                                         Value="9" />
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <StackPanel Orientation="Horizontal"
                                x:Name="templateRoot"
                                Background="Transparent"
                                SnapsToDevicePixels="True">
                        <Border x:Name="CheckOutBorder"
                                Padding="4"
                                Width="21"
                                Height="21">
                            <Border x:Name="checkBoxBorder"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="1"
                                    Background="{TemplateBinding Background}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    MinWidth="13"
                                    MinHeight="13">
                                <Grid x:Name="markGrid">
                                    <Path Width="0"
                                          x:Name="optionMark"
                                          Stretch="Uniform"
                                          RenderTransformOrigin="0.5,0.5"
                                          Data="F1M5.095,11.131C5.095,11.131 1.107,16.095 1.107,16.095 1.107,16.095 3.991,19.357 6.277,22.564 6.559,22.96 6.843,23.381 7.12,23.806 8.392,25.761 9.503,27.798 9.503,27.798 9.503,27.798 11.786,27.952 11.786,27.952 11.786,27.952 16.066,21.908 20.851,15.898 26.005,9.425 31.94,4.202 31.94,4.202 31.94,4.202 29.714,1.476 29.714,1.476 29.714,1.476 24.586,4.752 20.043,8.787 17.521,11.026 11.628,18.722 11.628,18.722 11.628,18.722 10.19,18.667 10.19,18.667 10.19,18.667 8.573,15.665 7.842,14.508 6.569,12.494 5.095,11.131 5.095,11.131z"
                                          Fill="{DynamicResource AyCheckBox.OptionMark.Static.Glyph}" />
                                    <Rectangle Margin="1"
                                               x:Name="indeterminateMark"
                                               Fill="#FFFFFF"
                                               Opacity="1" />
                                    <Rectangle Margin="9"
                                               x:Name="nullMark"
                                               Fill="{DynamicResource AyCheckBox.OptionMark.Static.Glyph}" />
                                </Grid>
                            </Border>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter"
                                          Focusable="False"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="Center" />
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Background"
                                    TargetName="checkBoxBorder"
                                    Value="{DynamicResource AyCheckBox.OptionMark.MouseOver.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="checkBoxBorder"
                                    Value="{DynamicResource AyCheckBox.OptionMark.MouseOver.Border}" />
                            <Setter Property="Opacity"
                                    TargetName="indeterminateMark"
                                    Value="0" />
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Opacity"
                                    Value="0.5" />
                        </Trigger>
                        <Trigger Property="IsChecked"
                                 Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="AyWhenCheckedBox_BeginStoryboard"
                                                 Storyboard="{StaticResource AyWhenCheckedBox}" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="AyWhenCheckBoxUnCheck_BeginStoryboard"
                                                 Storyboard="{StaticResource AyWhenCheckBoxUnCheck}" />
                            </Trigger.ExitActions>
                            <Setter Property="Opacity"
                                    TargetName="indeterminateMark"
                                    Value="0" />
                            <Setter Property="Background"
                                    TargetName="checkBoxBorder"
                                    Value="{DynamicResource AyCheckBox.OptionMark.MouseOver.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="checkBoxBorder"
                                    Value="{DynamicResource AyCheckBox.OptionMark.MouseOver.Border}" />
                        </Trigger>
                        <Trigger Property="IsChecked"
                                 Value="{x:Null}">
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="AyCheckBoxNullExit_BeginStoryboard"
                                                 Storyboard="{StaticResource AyCheckBoxNullExit}" />
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="AyCheckBoxNull_BeginStoryboard"
                                                 Storyboard="{StaticResource AyCheckBoxNull}" />
                            </Trigger.EnterActions>
                            <Setter Property="Opacity"
                                    TargetName="indeterminateMark"
                                    Value="0" />
                            <Setter Property="BorderBrush"
                                    TargetName="checkBoxBorder"
                                    Value="{DynamicResource AyCheckBox.OptionMark.MouseOver.Border}" />
                            <Setter Property="Background"
                                    TargetName="checkBoxBorder"
                                    Value="{DynamicResource AyCheckBox.OptionMark.MouseOver.Background}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 <CheckBox Style="{DynamicResource qq.checkbox}" KeyboardNavigation.TabIndex="2" Canvas.Left="152" Canvas.Top="103" Foreground="#ABADB3">忘记密码</CheckBox>
 <CheckBox Style="{DynamicResource qq.checkbox}" KeyboardNavigation.TabIndex="3" Canvas.Left="306" Canvas.Top="103" Foreground="#ABADB3">自动登录</CheckBox>

 

【WPF开发】控件介绍-CheckBox（多选框）
qq_39150957的博客
07-25 2784
这篇文章从基础到高级详细介绍了WPF中的CheckBox控件。首先，文章概述了CheckBox的作用、UI设计技巧和样式技巧。接着，详细介绍了CheckBox的基础属性，如IsChecked、Content、IsThreeState等，以及相关的事件和属性。然后，讨论了如何使用数据绑定、自定义样式、Triggers和ICommand绑定等高级技巧。最后，提供了一些进阶技巧，如多选与单选、状态转换和依赖属性，以及使用CheckBox时需要注意的事项。
WPF 的CheckBox的一种样式
ccvah的博客
06-18 1452
<!--CheckBox样式--> <Style x:Key="CheckRadioFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlT...
WPF 自定义CheckBox样式
weixin_34163553的博客
04-06 1015
一、Checkbox基本样式 下面的样式包含了CheckBox三种状态的显示，这里CheckBox的三种状态是使用图片代替的。当然你也可以使用字体图标或者Path绘制。 先看效果： 代码如下： <Style x:Key="chkBase" TargetType="CheckBox"> <Setter Property="IsCheck...
WPF CheckBox控件的个性化样式实现指南
最新发布
weixin_42327217的博客
07-15 1037
WPF（Windows Presentation Foundation）是微软推出的一种用于构建Windows客户端应用程序的用户界面框架，它包含了一个功能丰富的控件库，其中CheckBox控件是一个基础且重要的控件。CheckBox控件，中文名为复选框控件，是WPF中常用的一种界面元素，允许用户从一组选项中选择多个选项。它通常用于实现“是/否”或“开/关”类型的选择功能，例如，用户同意服务协议或选择多项内容。字体图标是由字体文件定义的一组字符，每个字符对应一个图形。
WPF之CheckBox组的全选设计
09-30 6694
最近看项目中的一个Check组的全选设计，感觉比较搓，看着不爽，于是花了点时间重新重构了下。涉及知识点:1.枚举的Flags特性；2.位运算。         先看看界面:         需求是窗体有若干个选择，在接收消息时根据选择进行筛选，显示相关的信息。项目中不爽的主要两点：其一，在点击子项时都去判断是不是该变动全选按钮的状态变化，用了不少的if；其二，在判断消息是否符合要求时，又要
用WPF自定义CheckBox的样式(框框和钩钩)
11-03
在WPF中自定义了CheckBox的新样式，主要是改变了那个框框和钩钩
WPF CheckBox 样式
weixin_30559481的博客
12-27 370
<Style x:Key="FocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectan...
wpf checkbox样式
08-22
wpf checkbox选中与不选中的样式，黄色的。
WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼
10-30
WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。代码对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。如果不是很适应自己系统的整体风格，可以对样式代码进行修改。
WPF之CheckBox控件详解
04-30
5. 样式和模板：WPF允许开发者通过样式和控件模板来自定义CheckBox的外观和行为，这为CheckBox控件的个性化设计提供了灵活性。 6. 逻辑关系：在有些场景中，多个CheckBox控件之间可能存在逻辑关系，例如互斥（单选...
WPF中checkbox使用
02-13
WPF中使用canvas基于位置动态绑定数据，以checkbox的形式呈现，其中数据库部门自己生成一张表就可以了，适合初学者……
WPF CheckBox自定义样式
chulijun3107的博客
01-07 1332
今天整理了两个CheckBox样式，用鼠标选择时都是滑动效果，觉得还不错，特记录一下，效果图如下： 以下是代码，直接粘贴的创建的Windows中，运行就可以了。 <Window.Resources> <LinearGradientBrush x:Key="CheckedBlue" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FF285AB3" Offset="0"
WPF实现wp8样式的CheckBox
u010924028的专栏
09-15 1070
效果很简单，直接上图 实现的方式很简单，直接上代码                                                                                                                                                      
WPF CheckBox 自定义样式
weixin_33862993的博客
01-08 745
 WPF 自定义样式。CheckBox &lt;Style x:Key="EmptyCheckBox" TargetType="CheckBox"&gt; &lt;Setter Property="Focusable" Value="False"/&gt; &lt;Setter Property="IsTabStop&quo
WPF CHECKBOX STYLE
weixin_30498807的博客
10-14 292
源自http://www.wpfhelper.com/index.php/android-ui-for-wpf/23-modern-ui-for-wpf/android-ui-for-wpf/26-wpf-checkbox-style-inspired-by-android CheckBoxStyleXAMLWPF How create WPF CheckBox style and...
用WPF自定义CheckBox的样式
pp9105的专栏
11-03 5680
用WPF自定义CheckBox的样式 在网上search到的CheckBox自定义样式的例子很少，可能是由于这方面的需求不多，大多数情况下都是采用系统默认下的样式就OK。但是随着技术的不断革新，像CheckBox这样的传统外观，也许会在项目中拖你的后腿。这里，我在WPF中自定义了CheckBox的新样式，也许不能满足你的实际需求，但是重点在于方法，而不是效果。 如何修改CheckBox
WPF里checkbox样式
12-26
如果你想自定义Checkbox的样式，WPF提供了丰富的样式和模板系统来控制其外观。 你可以通过`ResourceDictionary`或者`ControlTemplate`来修改Checkbox的样式。以下是简单的步骤： 1. 创建`ResourceDictionary`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值