WPF之CheckBox样式

最新推荐文章于 2025-06-13 16:01:20 发布
最新推荐文章于 2025-06-13 16:01:20 发布
阅读量2.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： WPF 控件样式 文章标签： checkbox wpf 控件样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_23018459/article/details/73613126
本文介绍了一种使用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 2737
这篇文章从基础到高级详细介绍了WPF中的CheckBox控件。首先，文章概述了CheckBox的作用、UI设计技巧和样式技巧。接着，详细介绍了CheckBox的基础属性，如IsChecked、Content、IsThreeState等，以及相关的事件和属性。然后，讨论了如何使用数据绑定、自定义样式、Triggers和ICommand绑定等高级技巧。最后，提供了一些进阶技巧，如多选与单选、状态转换和依赖属性，以及使用CheckBox时需要注意的事项。
用WPF自定义CheckBox的样式(框框和钩钩)
11-03
在WPF中自定义了CheckBox的新样式，主要是改变了那个框框和钩钩
WPF CheckBox 样式
weixin_30559481的博客
12-27 369
<Style x:Key="FocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectan...
WPF之CheckBox
最新发布
Major_S的博客
06-13 887
通过。
WPF 自定义CheckBox样式
weixin_34163553的博客
04-06 1014
一、Checkbox基本样式 下面的样式包含了CheckBox三种状态的显示，这里CheckBox的三种状态是使用图片代替的。当然你也可以使用字体图标或者Path绘制。 先看效果： 代码如下： <Style x:Key="chkBase" TargetType="CheckBox"> <Setter Property="IsCheck...
WPF 的CheckBox的一种样式
ccvah的博客
06-18 1451
<!--CheckBox样式--> <Style x:Key="CheckRadioFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlT...
wpf checkbox样式
08-22
在这个场景中，你提到的“wpf checkbox样式”指的是为CheckBox定制独特的视觉表现，特别是选中和未选中时显示为黄色的背景。 创建自定义的WPF CheckBox样式通常涉及到以下步骤： 1. **资源字典**：首先，你需要...
WPF之CheckBox控件详解
04-30
5. 样式和模板：WPF允许开发者通过样式和控件模板来自定义CheckBox的外观和行为，这为CheckBox控件的个性化设计提供了灵活性。 6. 逻辑关系：在有些场景中，多个CheckBox控件之间可能存在逻辑关系，例如互斥（单选...
WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼
10-30
WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。代码对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。如果不是很适应自己系统的整体风格，可以对样式代码进行修改。
WPF CheckBox自定义样式
chulijun3107的博客
01-07 1328
今天整理了两个CheckBox样式，用鼠标选择时都是滑动效果，觉得还不错，特记录一下，效果图如下： 以下是代码，直接粘贴的创建的Windows中，运行就可以了。 <Window.Resources> <LinearGradientBrush x:Key="CheckedBlue" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FF285AB3" Offset="0"
WPF中checkbox使用
02-13
WPF中使用canvas基于位置动态绑定数据，以checkbox的形式呈现，其中数据库部门自己生成一张表就可以了，适合初学者……
WPF实现wp8样式的CheckBox
u010924028的专栏
09-15 1067
效果很简单，直接上图 实现的方式很简单，直接上代码                                                                                                                                                      
WPF CheckBox 自定义样式
weixin_33862993的博客
01-08 742
 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 290
源自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 5675
用WPF自定义CheckBox的样式 在网上search到的CheckBox自定义样式的例子很少，可能是由于这方面的需求不多，大多数情况下都是采用系统默认下的样式就OK。但是随着技术的不断革新，像CheckBox这样的传统外观，也许会在项目中拖你的后腿。这里，我在WPF中自定义了CheckBox的新样式，也许不能满足你的实际需求，但是重点在于方法，而不是效果。 如何修改CheckBox
WPF 基础控件之CheckBox样式
dotNET跨平台
02-24 1235
WPF开发者QQ群：340500857 由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ邀请入群需备注WPF开发者PS：...
WPF里checkbox样式
12-26
在WPF（Windows Presentation Foundation）中，Checkbox是一种常用的控件，用于让用户选择是否同意某个选项。如果你想自定义Checkbox的样式，WPF提供了丰富的样式和模板系统来控制其外观。 你可以通过`ResourceDictionary`或者`ControlTemplate`来修改Checkbox的样式。以下是简单的步骤： 1. 创建`ResourceDictionary`（资源字典）： 在`App.xaml`或单独的`ResourceDictionary.xaml`文件中添加如下内容，定义新的`Style`规则： ```xml <Style x:Key="CustomCheckboxStyle" TargetType="{x:Type ToggleButton}"> <!-- 修改颜色、边框、填充等属性 --> <Setter Property="Background" Value="#FF007FFF"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="BorderBrush" Value="LightGray"/> <!-- 可以添加更多设置如检查标记的图标或大小 --> </Style> ``` 2. 使用样式： 在XAML中引用新创建的样式给每个Checkbox，例如： ```xml <CheckBox Style="{StaticResource CustomCheckboxStyle}"/> ``` 3. 控制模板（ControlTemplate）： 如果需要更精细的定制，可以创建完整的`ControlTemplate`。这允许你在运行时动态改变Checkbox的外观。但是这通常涉及到更复杂的XAML和可能的代码绑定。 **
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值