【WPF】使用 XAML 的 Trigger 系統實現三態按鈕

利用 WPF 的 Trigger 系統，也可以很簡單的只使用xmal實現三態按鈕。在Window或UserControl的資源中聲明按鈕的style並加入觸發功能。使用的時候直接在button里復寫style就可以了，廢話不多說，直接上代碼：

<UserControl.Resources>
        <Style x:Key="threeStateButton" TargetType="{x:Type Button}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <StackPanel Orientation="Horizontal" >
                            <Image Name="ImgBtnBg3" 
                                   Source="Skins/Default/action_normal.png" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Source" 
                                        Value="Skins/Default/action_selected.png" 
                                        TargetName="ImgBtnBg3"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Source" 
                                        Value="Skins/Default/action_active.png" 
                                        TargetName="ImgBtnBg3"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Source" 
                                        Value="Skins/Default/action_normal.png" 
                                        TargetName="ImgBtnBg3"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

 

使用時在button中引用：

<Button x:Name="m_btn" Content="Button" HorizontalAlignment="Center" Width="60" Height="60"
               VerticalAlignment="Center" Style="{StaticResource threeStateButton}"/>