【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