如何在.NET WPF项目(Visual Studio 2022)中添加切换开关按钮?
不依赖外部库实现WPF切换开关按钮
完全可以不添加外部库实现你要的这种切换开关效果,核心是通过自定义ToggleButton的Style来实现,WPF的样式系统支持高度定制。
实现步骤
下面是一个完整的自定义切换开关Style示例,效果和你描述的一致(带圆角滑块、切换时背景色与滑块位置联动的开关):
<Window.Resources> <Style x:Key="ToggleSwitchStyle" TargetType="ToggleButton"> <Setter Property="Width" Value="48"/> <Setter Property="Height" Value="24"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Grid> <!-- 开关背景 --> <Border x:Name="BackgroundBorder" CornerRadius="12" Background="#E0E0E0" Width="48" Height="24"/> <!-- 滑块 --> <Ellipse x:Name="SliderEllipse" Fill="White" Width="20" Height="20" Margin="2,2,0,0"> <Ellipse.RenderTransform> <TranslateTransform x:Name="SliderTransform" X="0"/> </Ellipse.RenderTransform> </Ellipse> </Grid> <ControlTemplate.Triggers> <!-- 选中状态 --> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="BackgroundBorder" Property="Background" Value="#4CAF50"/> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="SliderTransform" Storyboard.TargetProperty="X" To="24" Duration="0:0:0.1"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="SliderTransform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.1"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <!-- 鼠标悬停状态 --> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="BackgroundBorder" Property="Opacity" Value="0.8"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <!-- 使用示例 --> <ToggleButton Style="{StaticResource ToggleSwitchStyle}" IsChecked="False"/>
这个Style通过ControlTemplate重写了ToggleButton的视觉结构,用Trigger和Storyboard实现切换时的平滑动画,完全基于WPF原生控件,不需要任何外部依赖。
若不想自定义样式的最佳方案
如果觉得手动写样式太繁琐,最佳方案是使用成熟的开源WPF控件库MaterialDesignInXAMLToolkit:
- 通过NuGet安装
MaterialDesignThemes包 - 在XAML中引用命名空间后,直接使用
ToggleSwitch控件:
<materialDesign:ToggleSwitch IsChecked="False" OnContent="开" OffContent="关"/>
这个库维护活跃,样式丰富且经过大量测试,能快速实现符合现代UI风格的切换开关,同时支持更多自定义属性(比如文字、颜色、大小等)。
内容的提问来源于stack exchange,提问作者Kaan Çağhan
相关产品推荐
相关产品推荐

