WPF自定义控件渲染样式未生效，如何使其正常生效？

我创建了如下WPF自定义控件库：

KiwiButton.xaml #

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:KiwiWPFControl.Controls">
<Style x:Key="KiwiButtonStyle" TargetType="local:KiwiButton" >
    <Setter Property="FontSize" Value="30"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                <GradientStop Color="#FF00AA11" Offset="0"/>
                <GradientStop Color="#FF00AA88" Offset="0.5"/>
                <GradientStop Color="#FF00AAA6" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:KiwiButton" >
                <Border BorderThickness="1" CornerRadius="15" Background="Transparent">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers >
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter Property="Button.Background" Value="#AA00AAA6"/>
                    </Trigger >
                </ControlTemplate.Triggers >
            </ControlTemplate >
        </Setter.Value>
    </Setter>
</Style >
<Style BasedOn="{StaticResource KiwiButtonStyle}" TargetType="local:KiwiButton"/>

Generic.xaml #

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/KiwiWPFControl;component/Themes/KiwiButton.xaml"/>
</ResourceDictionary.MergedDictionaries>

KiwiButton.cs #

namespace KiwiWPFControl.Controls{
public class KiwiButton : Button
{
    static KiwiButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(KiwiButton), new FrameworkPropertyMetadata(typeof(KiwiButton)));
    }
}

我在Demo项目中按如下方式使用该按钮：

App.xaml #

<Application x:Class="KiwiWPFDemo.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:KiwiWPFDemo"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/KiwiWPFControl;component/Themes/Generic.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

MainWindow.xaml #

<Window x:Class="KiwiWPFDemo.MainWindow"
    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:KiwiWPFDemo"
    mc:Ignorable="d"
    xmlns:kiwi="clr-namespace:KiwiWPFControl.Controls;assembly=KiwiWPFControl"
    Height="450" Width="800">
<Grid>
    <kiwi:KiwiButton Width="200" Height="100" Content="12"/>
</Grid>

项目编译运行成功，但控件显示效果不符合预期，请问如何让该自定义控件的样式正常生效？

问题原因与解决方案 #

你的自定义按钮样式不生效的核心问题在于ControlTemplate里的Border没有绑定控件的Background属性，同时鼠标悬停触发器的Setter目标也不对。具体修复步骤：

• 修改KiwiButton.xaml中的ControlTemplate，把Border的Background绑定到模板父级的Background属性，这样Style里设置的渐变背景才能显示出来：

  <Border BorderThickness="1" CornerRadius="15" Background="{TemplateBinding Background}">
      <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
  </Border>
  

• 修正鼠标悬停触发器的Setter，不需要指定Button.前缀，直接用目标类型的属性即可：

  <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="#AA00AAA6"/>
  </Trigger>
  

• 可选优化：给Border添加BorderBrush绑定，让边框样式也能生效。先在Style里添加BorderBrush的Setter：

  <Setter Property="BorderBrush" Value="#FF007755"/>
  

  再修改Border的属性：

  <Border BorderThickness="1" CornerRadius="15" 
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}">
  

完成以上修改后，自定义按钮的渐变背景、字体样式、鼠标悬停效果就能正常显示了。

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