WPF CheckBox自定义样式

最新推荐文章于 2024-04-24 11:16:40 发布
最新推荐文章于 2024-04-24 11:16:40 发布
阅读量1k 收藏 1
点赞数
分类专栏： WPF 文章标签： windows checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chulijun3107/article/details/112341497
版权

今天整理了两个CheckBox样式，用鼠标选择时都是滑动效果，觉得还不错，特记录一下，效果图如下：

以下是代码，直接粘贴的创建的Windows中，运行就可以了。

<Window.Resources>
        <LinearGradientBrush x:Key="CheckedBlue" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FF285AB3" Offset="0" />
            <GradientStop Color="#FF4184EC" Offset="0.5" />
            <GradientStop Color="#FF558BED" Offset="0.5" />
            <GradientStop Color="#FF7DACF0" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="CheckedOrange" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FFCA6A13" Offset="0" />
            <GradientStop Color="#FFF67D0C" Offset="0.2" />
            <GradientStop Color="#FFFE7F0C" Offset="0.2" />
            <GradientStop Color="#FFFA8E12" Offset="0.5" />
            <GradientStop Color="#FFFF981D" Offset="0.5" />
            <GradientStop Color="#FFFCBC5A" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="CheckedOrangeBorder" Color="#FF8E4A1B" />
        <SolidColorBrush x:Key="CheckedBlueBorder" Color="#FF143874" />
        <Style x:Key="OrangeSwitchStyle" TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="OnChecking">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="53" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="OnUnchecking">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <DockPanel x:Name="dockPanel">
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" RecognizesAccessKey="True" VerticalAlignment="Center" />
                            <Grid>
                                <Border x:Name="BackgroundBorder" BorderBrush="#FF939393" BorderThickness="1" CornerRadius="3" Height="27" Width="94">
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#FFB5B5B5" Offset="0" />
                                            <GradientStop Color="#FFDEDEDE" Offset="0.1" />
                                            <GradientStop Color="#FFEEEEEE" Offset="0.5" />
                                            <GradientStop Color="#FFFAFAFA" Offset="0.5" />
                                            <GradientStop Color="#FFFEFEFE" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Ellipse x:Name="Off" Width="14" Height="14" Stroke="#FF7A7A7A" StrokeThickness="2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                        <Line x:Name="On" X1="0" Y1="0" X2="0" Y2="14" Stroke="#FF7A7A7A" StrokeThickness="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Grid>
                                </Border>
                                <Border BorderBrush="#FF939393" HorizontalAlignment="Left" x:Name="slider" Width="41" Height="27" BorderThickness="1" CornerRadius="3" RenderTransformOrigin="0.5,0.5" Margin="0">
                                    <Border.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="1" />
                                            <SkewTransform AngleX="0" AngleY="0" />
                                            <RotateTransform Angle="0" />
                                            <TranslateTransform X="0" Y="0" />
                                        </TransformGroup>
                                    </Border.RenderTransform>
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF0F0F0" Offset="0" />
                                            <GradientStop Color="#FFCDCDCD" Offset="0.1" />
                                            <GradientStop Color="#FFFBFBFB" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                            </Grid>
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnUnchecking}" x:Name="OnUnchecking_BeginStoryboard" />
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnChecking}" x:Name="OnChecking_BeginStoryboard" />
                                </Trigger.EnterActions>
                                <Setter TargetName="On" Property="Stroke" Value="White" />
                                <Setter TargetName="Off" Property="Stroke" Value="White" />
                                <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource CheckedOrange}" />
                                <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource CheckedOrangeBorder}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.4" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="chkBullet" TargetType="CheckBox">
            <Setter Property="IsChecked" Value="False"/>
            <Setter Property="Foreground" Value="#999"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Border x:Name="Border" Width="60" Height="20" CornerRadius="10" Background="{TemplateBinding Background}" >
                            <Grid>
                                <Border x:Name="border" Width="18" Height="18" CornerRadius="9" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1 0" Background="White">
                                    <Border.RenderTransform>
                                        <TranslateTransform X="0"/>
                                    </Border.RenderTransform>
                                </Border>
                                <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Margin="9 0" VerticalAlignment="Center" Foreground="Black" >
                                    <TextBlock.RenderTransform>
                                        <TranslateTransform  X="18"></TranslateTransform>
                                    </TextBlock.RenderTransform>
                               </TextBlock>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/>
                                <Setter Property="Background" TargetName="Border" Value="green"></Setter>
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="40" Duration="00:00:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.0001"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="18" Duration="00:00:0.0001"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="10"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Content="开启" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Content="关闭" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <StackPanel Grid.Column="1" Grid.Row="1">
            <CheckBox Style="{StaticResource chkBullet}" Background="Gray" IsChecked="True" Content="关闭" Tag="开启" />
            <CheckBox Style="{StaticResource OrangeSwitchStyle}" IsChecked="True"></CheckBox>
        </StackPanel>
        <StackPanel Grid.Row="2" Grid.Column="1">
            <CheckBox Style="{StaticResource chkBullet}" Background="Gray" IsChecked="False" Content="关闭" Tag="开启" />
            <CheckBox Style="{StaticResource OrangeSwitchStyle}"></CheckBox>
        </StackPanel>
    </Grid>

 

楚楚3107
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼
10-30
WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。代码对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。如果不是很适应自己系统的整体风格，可以对样式代码进行修改。
WPF 自定义CheckBox样式
06-25
WPF利用字体图标，制作自定义CheckBox，已达到使自己的CheckBox更加的美观
WPF重新定义GroupBox新样式
最新发布
Wangzhe910113的博客
04-24 1291
WPF ；GroupBox新样式 ；WPF 中 Path的使用语法 ；WPF 中Polyline与Polygon的使用，相同与不同之处；WPF控件新样式的代码使用情况分析
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
weixin_33973600的博客
11-19 421
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： CheckBox复选框的自定义样式，有两种不同的风格实现； RadioButton单选框自定义样式，有两种不同的风格实现； 二． CheckBox自定义样式 2.1 CheckBox...
WPF 的CheckBox的一种样式
ccvah的博客
06-18 1380
<!--CheckBox样式--> <Style x:Key="CheckRadioFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlT...
WPF CheckBox 滑块 样式 开关
weixin_30825581的博客
01-31 313
效果图 样式代码 <Style x:Key="CheckRadioFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate&g...
WPF CheckBox 自定义样式
weixin_33862993的博客
01-08 680
 WPF 自定义样式。CheckBox &lt;Style x:Key="EmptyCheckBox" TargetType="CheckBox"&gt; &lt;Setter Property="Focusable" Value="False"/&gt; &lt;Setter Property="IsTabStop&quo
用WPF自定义CheckBox的样式(框框和钩钩)
10-28
在WPF中自定义了CheckBox的新样式，主要是改变了那个框框和钩钩 在WPF中自定义了CheckBox的新样式，主要是改变了那个框框和钩钩
WPF自定义时间控件，可选择日期、时间
04-13
WPF自定义时间控件，可选择日期、时间
WPF 子选项为CheckBox的TreeView实例
02-09
在WPF实际项目开发的时候，经常会用到带CheckBox的TreeView，虽然微软在WPF的TreeView中没有提供该功能，但是微软在WPF中提供强大的ItemTemplate模板功能和自定义样式，那我们可以自己写一个这样的控件供自己使用。
WPF自定义GroupBox 标题文字居中显示
hisxiwu的博客
02-18 1235
实现思路：为GroupBox添加HorizontalAlignment 的依赖属性。
XAML WPF项目groupBox控件
chenggong9527的博客
08-01 357
代码】XAMLWPF项目groupBox控件。
【 WPF 】重写 CheckBox 选择按钮样式
Nick大帅仔 的博客
10-29 2166
1.安装包资源 NuGet 2.样式代码 &lt;Style x:Key="chkTest" TargetType="CheckBox"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTempl
WPF漂亮的窗体样式、按钮样式、复选框样式
weixin_30784501的博客
12-19 274
<!--窗体样式--> <ControlTemplate x:Key="WindowTemplateKey" TargetType="{x:Type Window}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBind...
WPF 把CheckBox渲染成圆形的
weixin_44831306的博客
07-28 1159
/Setter></Style></Grid></Border></Grid></Trigger></Trigger></Trigger></Trigger></Trigger></Trigger></Setter></Style>
继续聊WPF——自定义CheckBox控件外观
热门推荐
老周——“易之道”
11-13 2万+
上一篇文章中谈到了BulletDecorator控件，就是为自定义CheckBox控件的模板做准备，因为CheckBox需要比较严格的布局，正好，BulletDecorator控件就合适了，该控件的布局是有项目列表，排列起来好办很多了。   第一步，先建立一项资源，就是控件的聚焦样式，即当你在窗体中不断按Tab键使控件获取焦点时的样式，后面要用到。
wpf checkbox
08-18
如果你想要自定义CheckBox的样式和模板，可以参考微软提供的官方文档链接。在后台代码中，可以使用Checked和Unchecked事件来处理CheckBox的状态变化。在Checked事件中，你可以通过sender参数来获取到触发事件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

楚楚3107

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值