You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在.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:

  1. 通过NuGet安装MaterialDesignThemes包
  2. 在XAML中引用命名空间后,直接使用ToggleSwitch控件:
<materialDesign:ToggleSwitch IsChecked="False" OnContent="开" OffContent="关"/>

这个库维护活跃,样式丰富且经过大量测试,能快速实现符合现代UI风格的切换开关,同时支持更多自定义属性(比如文字、颜色、大小等)。

内容的提问来源于stack exchange,提问作者Kaan Çağhan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 12:55:59