WPF自定义控件MouseOver背景样式未覆盖问题：原因与解决

问题场景 #

我做了个WPF自定义控件IconCustom，默认样式的ControlTemplate里，内部Border通过自身Style的Trigger设置鼠标悬停时背景变红。但给控件指定IconButtonStyle样式（该样式通过Trigger设置鼠标悬停时控件背景为黄色）后，鼠标悬停时黄色没覆盖红色，需要实现：未指定样式时默认红色生效，指定样式时黄色生效。

原代码片段 #

默认样式

<Style TargetType="{x:Type local:IconCustom}">      
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type local:IconCustom}">
           <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
             <Border.Style>
               <Style TargetType="Border">
                 <Style.Triggers>
                   <Trigger Property="IsMouseOver" Value="True">
                     <Setter Property="Background" Value="Red">
                   </Trigger>
                 </Style.Triggers>
               </Style>
             </Border.Style>
             <TextBlock Text="Abcde"/>
           </Border>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style> 

控件使用代码

<uc:IconCustom Width="400" Height="400" Style="{StaticResource IconButtonStyle}"/> 

指定样式IconButtonStyle

<Style TargetType="{x:Type uc:IconCustom}" x:Key="IconButtonStyle">
   <Style.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Background" Value="Yellow"/>
       </Trigger>
   </Style.Triggers>
</Style> 

问题原因 #

这是WPF属性值优先级的问题：

• Border自身Style里的Trigger直接设置Background，优先级高于TemplateBinding绑定的控件Background属性；
• 当指定IconButtonStyle时，控件的Background被Trigger设为黄色，但Border本地Style的Trigger优先级更高，所以红色会覆盖黄色。

解决方案 #

方案1：改用ControlTemplate的Trigger监听控件状态 #

把Border的本地Style去掉，换成在ControlTemplate里监听控件的IsMouseOver，直接设置Border的Background。这样外部样式设置的控件Background能正确覆盖默认逻辑。

修改后的默认样式：

<Style TargetType="{x:Type local:IconCustom}">      
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type local:IconCustom}">
           <Border x:Name="border" 
                   Background="{TemplateBinding Background}" 
                   BorderBrush="{TemplateBinding BorderBrush}" 
                   BorderThickness="{TemplateBinding BorderThickness}">
             <TextBlock Text="Abcde"/>
           </Border>
           <!-- 监听控件的IsMouseOver状态 -->
           <ControlTemplate.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
               <Setter TargetName="border" Property="Background" Value="Red" />
             </Trigger>
           </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style> 

方案2：限制Border的Trigger仅在控件Background为默认值时生效 #

先给控件设置默认Background（比如Transparent），然后让Border的Trigger仅在控件Background为默认值时才触发红色背景，这样外部样式设置的黄色背景会跳过这个Trigger。

修改后的默认样式：

<Style TargetType="{x:Type local:IconCustom}">      
   <!-- 设置控件默认Background为Transparent -->
   <Setter Property="Background" Value="Transparent"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type local:IconCustom}">
           <Border x:Name="border" 
                   Background="{TemplateBinding Background}" 
                   BorderBrush="{TemplateBinding BorderBrush}" 
                   BorderThickness="{TemplateBinding BorderThickness}">
             <Border.Style>
               <Style TargetType="Border">
                 <Style.Triggers>
                   <!-- 多条件触发：鼠标悬停+控件Background为默认值 -->
                   <MultiDataTrigger>
                     <MultiDataTrigger.Conditions>
                       <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
                       <Condition Binding="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" Value="Transparent"/>
                     </MultiDataTrigger.Conditions>
                     <Setter Property="Background" Value="Red"/>
                   </MultiDataTrigger>
                 </Style.Triggers>
               </Style>
             </Border.Style>
             <TextBlock Text="Abcde"/>
           </Border>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style> 

效果验证 #

两种方案都能实现需求：

• 未指定IconButtonStyle时，鼠标悬停控件显示红色背景；
• 指定IconButtonStyle时，鼠标悬停控件显示黄色背景，完全覆盖默认红色。

内容的提问来源于stack exchange，提问作者Savad