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應用程序中的使用非常廣泛。我們可以使用它來呈現開關狀態或選項選擇，同時可以通過樣式設置控件的外觀，使之更好的適應業務需求。