WPF 自定义 ToggleButton 样式

最新推荐文章于 2025-03-18 16:59:52 发布
最新推荐文章于 2025-03-18 16:59:52 发布
阅读量1.1w 收藏 22
点赞数 16
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48316521/article/details/118408253
版权

UI 设计中经常会用到 Toggle Button，用于切换不同的状态。
UWP 中有 ToggleSwitch, 长这样：
在这里插入图片描述

WPF 中有 ToggleButton, 长这样：
在这里插入图片描述
嗯？？？？？（黑人问号脸）

=========== 分割线 ===========

WPF 中需要给 ToggleButton 自定义控件模板，以实现 ToggleSwitch 的效果，先上效果图：
在这里插入图片描述

Style:

<ControlTemplate.Resources>
	<Storyboard x:Key="OnChecked">
		<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
										  Storyboard.TargetName="path">
			<EasingThicknessKeyFrame KeyTime="0" Value="40,0,0,0"/>
		</ThicknessAnimationUsingKeyFrames>
	</Storyboard>
	<Storyboard x:Key="OnUnchecked">
		<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
										  Storyboard.TargetName="path">
			<EasingThicknessKeyFrame KeyTime="0" Value="0"/>
		</ThicknessAnimationUsingKeyFrames>
	</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="toggleBorder"
		CornerRadius="13"
		Background="Green"
		Width="60"
		Height="26"
		BorderThickness="1"
		BorderBrush="Black">
	<Grid>
		<Path x:Name="path">
			<Path.Fill>
				<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
					<GradientStop Color="White"/>
				</LinearGradientBrush>
			</Path.Fill>
			<Path.Data>
				<GeometryGroup>
					<GeometryGroup.Children>
						<EllipseGeometry Center="6,12" RadiusX="9" RadiusY="9"/>
					</GeometryGroup.Children>
				</GeometryGroup>
			</Path.Data>
		</Path>
	</Grid>
</Border>

加上 Trigger:

<ControlTemplate.Triggers>
	<EventTrigger RoutedEvent="ToggleButton.Checked">
		<BeginStoryboard Storyboard="{StaticResource OnChecked}"/>
	</EventTrigger>
	<EventTrigger RoutedEvent="ToggleButton.Unchecked">
		<BeginStoryboard Storyboard="{StaticResource OnUnchecked}"/>
	</EventTrigger>
	<Trigger Property="IsChecked" Value="True">
		<Setter Property="Background" Value="DimGray"/>
		<Setter TargetName="toggleBorder" Property="Background" Value="Green"/>
		<Setter TargetName="toggleBorder" Property="BorderBrush" Value="Green"/>
	</Trigger>
	<Trigger Property="IsChecked" Value="False">
		<Setter TargetName="toggleBorder" Property="Background" Value="LightGray"/>
		<Setter TargetName="path" Property="Fill">
			<Setter.Value>
				<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
					<GradientStop Color="Gray"/>
				</LinearGradientBrush>
			</Setter.Value>
		</Setter>
		<Setter TargetName="path" Property="Data">
			<Setter.Value>
				<GeometryGroup>
					<GeometryGroup.Children>
						<EllipseGeometry Center="13,12" RadiusX="9" RadiusY="9"/>
					</GeometryGroup.Children>
				</GeometryGroup>
			</Setter.Value>
		</Setter>
	</Trigger>
</ControlTemplate.Triggers>

到这儿自定义 ToggleButton 就基本完成了，下面是扩展部分。

=============================

扩展一：High Contrast

实际开发中，往往需要控件支持高对比度（High Contrast）：

using System.ComponentModel;
using System.Windows;
using System.Windows.Media;

namespace ToggleButtonStyle
{
    public class HighContrastHelper : DependencyObject
    {
        private HighContrastHelper()
        {
            SystemParameters.StaticPropertyChanged += SystemParameters_StaticPropertyChanged;
        }

        ~HighContrastHelper()
        {
            SystemParameters.StaticPropertyChanged -= SystemParameters_StaticPropertyChanged;
        }

        private static HighContrastHelper instance;
        public static HighContrastHelper Instance
        {
            get
            {
                if (instance == null)
                    instance = new HighContrastHelper();
                return instance;
            }
        }

        public void ApplyCurrentTheme()
        {
            if (SystemParameters.HighContrast)
            {
                SolidColorBrush windowbrush = SystemColors.WindowBrush;
                if (windowbrush.Color.R == 255 && windowbrush.Color.G == 255 && windowbrush.Color.B == 255)
                {
                    Instance.IsHighContrastWhite = true;
                    Instance.IsHighContrastBlack = false;
                }
                else if (windowbrush.Color.R == 0 && windowbrush.Color.G == 0 && windowbrush.Color.B == 0)
                {
                    Instance.IsHighContrastWhite = false;
                    Instance.IsHighContrastBlack = true;
                }
                else
                {
                    Instance.IsHighContrastWhite = false;
                    Instance.IsHighContrastBlack = false;
                }
            }
        }

        void SystemParameters_StaticPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "HighContrast")
            {
                ApplyCurrentTheme();
            }
        }

        public static readonly DependencyProperty IsHighContrastWhiteProperty = DependencyProperty.Register(
            "IsHighContrastWhite",
            typeof(bool),
            typeof(HighContrastHelper),
            new PropertyMetadata(false));

        public static readonly DependencyProperty IsHighContrastBlackProperty = DependencyProperty.Register(
            "IsHighContrastBlack",
            typeof(bool),
            typeof(HighContrastHelper),
            new PropertyMetadata(false));

        public bool IsHighContrastWhite
        {
            get { return (bool)GetValue(IsHighContrastWhiteProperty); }
            private set { SetValue(IsHighContrastWhiteProperty, value); }
        }

        public bool IsHighContrastBlack
        {
            get { return (bool)GetValue(IsHighContrastBlackProperty); }
            private set { SetValue(IsHighContrastBlackProperty, value); }
        }
    }
}

注：系统事件在析构函数中最好取消订阅，以减小内存开销。

然后增加相应的 Trigger：

<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding Path=IsHighContrastWhite, Source={x:Static local:HighContrastHelper.Instance}}" Value="true" />
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Value="true"/>
		<Condition Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="true"/>
	</MultiDataTrigger.Conditions>
	<Setter TargetName="toggleBorder" Property="Background" Value="Blue"/>
</MultiDataTrigger>
<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding Path=IsHighContrastWhite, Source={x:Static local:HighContrastHelper.Instance}}" Value="true" />
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Value="true"/>
		<Condition Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="false"/>
	</MultiDataTrigger.Conditions>
	<Setter TargetName="toggleBorder" Property="Background" Value="Black"/>
</MultiDataTrigger>
<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding Path=IsHighContrastBlack, Source={x:Static local:HighContrastHelper.Instance}}" Value="true" />
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Value="true"/>
		<Condition Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="true"/>
	</MultiDataTrigger.Conditions>
	<Setter TargetName="toggleBorder" Property="Background" Value="Aqua"/>
</MultiDataTrigger>
<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding Path=IsHighContrastBlack, Source={x:Static local:HighContrastHelper.Instance}}" Value="true" />
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Value="true"/>
		<Condition Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="false"/>
	</MultiDataTrigger.Conditions>
	<Setter TargetName="toggleBorder" Property="Background" Value="Yellow"/>
</MultiDataTrigger>

要控件支持高对比度，还需给控件设置 Tag 属性：

<Setter Property="Tag" Value="{DynamicResource {x:Static SystemParameters.HighContrastKey}}"/>

效果图：

High Contrast White On：
在这里插入图片描述

High Contrast White Off：在这里插入图片描述
High Contrast Black On：
在这里插入图片描述

High Contrast Black Off：
在这里插入图片描述
扩展二：Accessibility

开发中往往还需要支持 Narrator 读取文本：

TabIndex="1"
AutomationProperties.Name="CustomizedToggle"

自动化测试 AutomationID：

AutomationProperties.AutomationId="CustomizedToggle"

需要注意的一点是当打开 Narrator，使用键盘的 Enter/Space 键切换 ToggleButton 的时候，其 Click 事件往往不能触发，这时候需要使用其 Checked/UnChecked 事件。

最后附上源码：WPF Toggle Button Style

That’s All, thx~

PS：原创不易，转载请注明出处。

WPF 自定义ToggleButton样式
anjingyatou的专栏
12-19 1万+
废话不多说！ 样式显示如图 源代码奉上：
WPF ToggleButton自定义样式
Boris的专栏
01-03 6941
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:m
开关类型WPF ToggleButton / RadioButton（打开/关闭）控件
04-05
替代的ToggleButton / RadioButton控件
C# WPF编程-ToggleButton
最新发布
若有博文对您有帮助，欢迎点赞关注，收藏评论。
03-18 453
在WPF中，ToggleButton是一个非常有用的控件，它允许用户在两种状态之间切换：选中（Checked）和未选中（Unchecked）。此外，还有一个中间状态叫做“不确定”（Indeterminate），但需注意的是，并不是所有的使用场景都需要或支持这个状态。下面将介绍如何使用ToggleButton，包括基本用法、样式定制以及事件处理。
WPF 控件 (三、切换按钮)
LyRics1996的博客
04-01 1443
与IconButton 基本一样 继承ToggleButton 是为了获得check属性。包含两个Icon 分别用来显示不同点击和默认的状态。没有单独写第二个依赖属性来显示文字 用Name替代。点击时切换 图标和文字显示状态。选中后 白色圆形慢慢滚动到右边。
wpf ToggleButton自定义样式
qq_23234933的博客
08-26 2034
今天在开发的过程中由于会用到wpf的ToggleButton来控制开关，于是在度娘寻觅终得一位佳人分享。 <LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFFFF" Offset="...
WPF ToggleButton
热门推荐
yulongguiziyao的专栏
07-25 2万+
ToggleButton就像拨动开关一样，把开关拨到一个位置，灯亮了；把开关拨到别一个位置，灯灭了。ToggleButton也是这样，按一下，其IsChecked属性变为True；再按一下，其IsChecked属性变为False。有时，我们需要维持三个状态，这时我们把IsThreeState属性设为True。在IsThreeState属性设为True时，IsChecked的属性值可能取三个值：Tr
WPF自定义模板--ToggleButton
代码改变世界
07-05 1141
WPF自定义模板--ToggleButton
WPF 基础控件之 ToggleButton 样式
zls365365的博客
06-19 4207
其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButtonToggleButton 实现下面的效果1）ToggleButton来实...
WPF 自定义各类按钮样式
韬光养晦
03-15 1万+
WPF 自定义按钮样式 Xaml代码： <Window x:Class="WPF0315b.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
自定义控件togglebutton
07-06
自定义控件togglebutton，快速学习自定义控件的方法，非常实用的demo
自定义个性化togglebutton
04-11
简单的风格.简单的自定义togglebutton
WPF 样式 style 滑动开关 实现的效果像checkbo好看的开关一样
08-10
WPF 样式 style 滑动开关 实现的效果像checkbo好看的开关一样
WPF自定义控件与样式(15)-终结篇 & 系列文章索引 & 源码共享
LJianDong的博客
11-07 764
系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展 WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 WPF自定义控件与样式...
WPF之控件
~忘记了时间~
05-10 498
控件都使用过，控件分类有哪些？哪些你用过都不一定了解的属性？
WPF (基础控件11)ToggleButton控件的详细使用教程
weixin_39604653的博客
09-02 4322
ToggleButton 是一个功能强大的控件，可以用于多种场景，如状态切换、模式选择等。通过事件处理、数据绑定、样式自定义和交互效果，你可以根据需要灵活地调整 ToggleButton 的行为和外观。
自定义ToggleButton的样式
qq_44884269的博客
04-11 1321
自定义ToggleButton的样式
wpf 自定义switch样式
07-27
在WPF中，可以通过自定义样式来创建自定义的Switch样式。首先，你可以使用ToggleButton控件作为Switch的基础，并为其设置自定义的样式。你可以使用Setter元素来设置ToggleButton的属性，例如Background、Foreground和BorderBrush等。此外，你还可以使用VisualStateManager来定义不同状态下的样式，例如Checked和Unchecked状态。在Checked状态下，你可以设置ToggleButton的背景色和边框颜色，以及切换按钮的Click事件。在Unchecked状态下，你可以设置ToggleButton的另一种背景色和边框颜色。同时，你还可以使用Tag属性来支持高对比度，通过设置Tag属性为SystemParameters.HighContrastKey的动态资源。这样，你就可以创建一个自定义的Switch样式了。\[1\]\[2\] #### 引用[.reference_title] - *1* *2* [WPF 自定义 ToggleButton 样式](https://blog.csdn.net/weixin_48316521/article/details/118408253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值