WPFToggleButton详解

发布时间：2023-05-20

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 应用程序中的使用非常广泛。我们可以使用它来呈现开关状态或选项选择，同时可以通过样式设置控件的外观，使之更好地适应业务需求。

推荐文章