【WPF】樣式與模板：鼠標移入/懸浮時按鈕的背景色不改變

情況：鼠標移到按鈕上，默認情況是按鈕背景色會改變的，網上也能搜到很多如何自定義改變的背景色。

需求：現在需求反過來，想要鼠標移到按鈕上，保持按鈕的背景色不改變。

一種思路：在樣式文件中，使用MultiTrigger來定義按鈕的【鼠標懸浮+不被選中/被選中】同時滿足的狀態時的背景色。

解決：自定義一個ToggleButton的樣式文件。
MyToggleButton.xaml：

<ResourceDictionary  x:Class="HomeDecorationPSD.Presentation.Style.MyToggleButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HomeDecorationPSD.Presentation.Style"
        mc:Ignorable="d">

    <Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="Width" Value="60"/>
        <Setter Property="Height" Value="20"/>
        <!-- 替換掉默認的模板 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border CornerRadius="3" BorderThickness="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <!-- 更改三態的背景顏色 -->
            <Trigger Property="IsChecked" Value="true">
                <Setter Property="Background" Value="#FFA1C3F3"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="false">
                <Setter Property="Background" Value="#FF14B3FD"/>
            </Trigger>
            <!-- 鼠標懸浮時，背景顏色不變 -->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="true"/>
                    <Condition Property="IsChecked" Value="true"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="Background" Value="#FFA1C3F3"/>
                </MultiTrigger.Setters>
            </MultiTrigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="true"/>
                    <Condition Property="IsChecked" Value="false"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="Background" Value="#FF14B3FD"/>
                </MultiTrigger.Setters>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

給ToggleButton使用這個樣式：

<UserControl x:Class="HomeDecorationPSD.Presentation.Views.SpaceView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:HomeDecorationPSD.Applications.ViewModels" mc:Ignorable="d" MinWidth="300" MinHeight="500" >
    <!-- 引入樣式文件 -->
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Presentation/Style/MyToggleButton.xaml" /><!-- 是工程的相對路徑 -->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <DockPanel Margin="10" >
        <StackPanel Orientation="Vertical">
        <WrapPanel Orientation="Horizontal" Margin="5">
                <ToggleButton Content="客餐廳" IsChecked="True" Style="{StaticResource myToggleButton}" Margin="5"/>
                <ToggleButton Content="客廳" Style="{StaticResource myToggleButton}" Margin="5"/>
                <ToggleButton Content="餐廳" Style="{StaticResource myToggleButton}" Margin="5"/>
                <ToggleButton Content="卧室" Style="{StaticResource myToggleButton}" Margin="5"/>
                <ToggleButton Content="測試" Style="{StaticResource myToggleButton}" Margin="5"/>
            </WrapPanel>
        </StackPanel>
    </DockPanel>
</UserControl>

運行效果：

小結：

1. 如果不給Style指定一個x:Key值，則所有的ToggleButton都會變成使用該樣式。為了避免這種情況，使用x:Key值來指定用哪個樣式，否則是默認樣式。
   關於WPF樣式的學習參考這篇文章：http://www.cnblogs.com/zhouyinhui/archive/2007/03/27/690431.html
2. 為什么要用上Template模板，居然在某度知道看到答案：https://zhidao.baidu.com/question/2137628503185830468.html

 

---

 

2018.3.25更新：

參考這個辦法：https://blog.csdn.net/qian_f/article/details/28886021