WPFToggleButton详解

一、简介

WPFToggleButton是一个能够呈现开关状态的按钮控件，当控件处于选中状态时，会呈现一种被选中的视觉效果，当控件处于未选中状态时，会呈现一种未被选中的视觉效果。

其继承自ToggleButton类，因此也具备了Button类和ContentControl类所拥有的属性和方法。通过该控件，用户可以进行简单的选项选择，或者类似于音频控制器等选择为ON或者OFF的操作。同时，该控件的外观和状态可以根据业务需求进行自定义样式、样式触发、模板等灵活的设置。

二、常用属性

1. IsChecked属性

用于获取或设置ToggleButton的选中状态。当属性值为True时，ToggleButton处于选中状态；当属性值为False时，ToggleButton处于未选中状态。默认值为 False。

代码示例：

<Window x:Class="ToggleButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <StackPanel VerticalAlignment="Center">
        <ToggleButton x:Name="tgb" Content="ToggleButton" 
                      IsChecked="False" 
                      Checked="tgb_Checked" Unchecked="tgb_Unchecked"/>
        <TextBlock x:Name="tb" Text="ToggleButton状态变化为:" VerticalAlignment="Top" Margin="10"/>
    </StackPanel>
</Window>

private void tgb_Checked(object sender, RoutedEventArgs e)
{
    tb.Text = "ToggleButton状态变化为: 选中";
}

private void tgb_Unchecked(object sender, RoutedEventArgs e)
{
    tb.Text = "ToggleButton状态变化为: 未选中";
}

2. Content属性

用于定义ToggleButton的内容。该属性可以为任何对象类型，包括字符串、数值、位图或其他UI元素。

代码示例：

<Window x:Class="ToggleButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <StackPanel VerticalAlignment="Center">
        <ToggleButton Content="ON" IsChecked="True"/>
        <ToggleButton Content="OFF" IsChecked="False"/>
    </StackPanel>
</Window>

3. Background属性

用于定义ToggleButton的背景颜色。该属性可以通过Brush属性设置为一种预定义颜色或自定义颜色。

代码示例：

<Window x:Class="ToggleButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <StackPanel VerticalAlignment="Center">
        <ToggleButton Content="ON" IsChecked="True" Background="Green"/>
        <ToggleButton Content="OFF" IsChecked="False" Background="Red"/>
    </StackPanel>
</Window>

三、常用事件

1. Checked事件

当ToggleButton的IsChecked属性从False变为True时，就会触发Checked事件。在处理该事件时，可以在程序中对选中状态进行相关的逻辑操作。

代码示例：

private void tgb_Checked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("ToggleButton处于选中状态！");
}

2. Unchecked事件

当ToggleButton的IsChecked属性从True变为False时，就会触发Unchecked事件。在处理该事件时，可以在程序中对非选中状态进行相关的逻辑操作。

代码示例：

private void tgb_Unchecked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("ToggleButton处于未选中状态！");
}

3. Click事件

当用户单击ToggleButton时，就会触发Click事件。该事件可以在程序中实现对ToggleButton的单击事件进行自定义处理。

代码示例：

private void tgb_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("单击ToggleButton！");
}

四、自定义ToggleButton样式

WPFToggleButton支持通过样式自定义控件的外观和状态。通过在XAML文件中定义ToggleButton的样式，可以更改它的外观，并在不同的状态下呈现特定的UI效果。

在下面的代码中，在ToggleButton的样式中分别定义了三种状态（默认、选中和禁用）的外观。

代码示例：

<Window x:Class="ToggleButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <Window.Resources>
        <Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="grid" Storyboard.TargetProperty="Background.Color" To="LightGray" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="grid" Storyboard.TargetProperty="Background.Color" To="DarkGray" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="grid" Storyboard.TargetProperty="Background.Color" To="Green" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="grid" Storyboard.TargetProperty="Background.Color" To="LightGray" Duration="0:0:0.1"/>
                                            <ColorAnimation Storyboard.TargetName="content" Storyboard.TargetProperty="Foreground.Color" To="Gray" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="grid" Background="White" 
                                  Margin="0" SnapsToDevicePixels="True">
                                <ContentPresenter x:Name="content" Margin="{TemplateBinding Padding}"
                                                  VerticalAlignment="Center" HorizontalAlignment="Center" RecognizesAccessKey="True"
                                                  Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                  IsHitTestVisible="False"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel VerticalAlignment="Center">
        <ToggleButton Style="{StaticResource ToggleButtonStyle1}" Content="ToggleButton"/>
    </StackPanel>
</Window>

五、小结

WPFToggleButton是一个非常实用的控件，在WPF应用程序中的使用非常广泛。我们可以使用它来呈现开关状态或选项选择，同时可以通过样式设置控件的外观，使之更好的适应业务需求。