【问题标题】：Toggle button in WPFWPF中的切换按钮
【发布时间】：2016-11-14 05:55:10
【问题描述】：

我是 wpf 的新手。我想创建像

这样的切换按钮

我怎样才能做到这一点。我是否需要使用两个按钮，并且在单击每个按钮时我需要禁用另一个按钮。或者还有其他类似 wpf 中的切换按钮的东西。实现这一目标的最佳方法是什么。任何建议表示赞赏。谢谢

【问题讨论】：

请分享一些你现在已经完成的代码
不久前有一个关于切换按钮的问题，经过一些调整，它可能适合您的需求：stackoverflow.com/questions/38220630/…
@ViVi Toggle ON OFF 太宽泛了？

标签： wpf button toggle

【解决方案1】：

这是一个快速版本。诀窍是使用样式。

风格：

<Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <StackPanel Orientation="Horizontal">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Border x:Name="on" Width="25" Height="25" Background="LightGray" CornerRadius="2,0,0,4" Margin="10,0,0,0">
                            <TextBlock x:Name="onText" Text="On" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <Border x:Name="off" Width="25" Height="25" Background="LightGray" CornerRadius="0,2,4,0">
                            <TextBlock x:Name="offText" Text="Off" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="on" Property="Background" Value="LightBlue"/>
                            <Setter TargetName="onText" Property="Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter TargetName="off" Property="Background" Value="LightBlue"/>
                            <Setter TargetName="offText" Property="Foreground" Value="White"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ToggleButton 调用：

    <ToggleButton 
        Content="ON LINE MODE" 
        Style="{StaticResource ToggleButtonStyle1}"/>

预览

【讨论】：

请包含封闭的标签
ToggleButtons 很容易搞砸，这个实现犯了两个典型的错误。 1.“启用”值在左侧。 2.“启用”颜色在禁用时仍然存在。
我在这两点上都同意你的观点。然而，她只问如何实现这样的事情，然后我做了一个“快速而肮脏”的版本。 ?✌