WPF中继承基控件的自定义控件样式未生效问题

问题分析 #

你遇到的核心问题有两个：

• 外部样式设置的CornerRadius不生效：自定义控件内部模板用ElementName=buttonExtension绑定属性，且默认样式的TargetType是基类Button，导致TemplateBinding无法识别自定义的CornerRadius属性。
• 重写样式模板后丢失自定义能力：外部重写模板时未继承自定义控件的默认模板结构，直接退化为Button的基础模板。

解决方案 #

1. 修正自定义控件的默认样式与模板绑定 #

修改ExtendedButton.xaml，将样式和模板的TargetType改为自定义控件本身，并用TemplateBinding直接关联CornerRadius属性，替代原有的ElementName绑定：

<Button
    x:Class="Win10Themables.Controls.ExtendedButton"
    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:local="clr-namespace:Win10Themables.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Button.Resources>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD" />
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4" />
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5" />
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383" />
    </Button.Resources>
    <Button.Style>
        <!-- 将TargetType改为自定义控件类型 -->
        <Style TargetType="{x:Type local:ExtendedButton}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ThemableFocusStyle}" />
            <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" />
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}" />
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="1" />
            <!-- 默认CornerRadius设为0，外部样式可覆盖 -->
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <!-- 模板TargetType也改为自定义控件 -->
                    <ControlTemplate TargetType="{x:Type local:ExtendedButton}">
                        <Border
                            x:Name="border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            <!-- 用TemplateBinding直接绑定自定义的CornerRadius属性 -->
                            CornerRadius="{TemplateBinding CornerRadius}"
                            SnapsToDevicePixels="true">
                            <ContentPresenter
                                x:Name="contentPresenter"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Focusable="False"
                                RecognizesAccessKey="True"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

2. 外部样式无需修改（保持原有代码即可） #

你的RoundButtonStyle可以直接使用，此时CornerRadius会通过TemplateBinding正确传递到控件模板的Border上：

<Style x:Key="RoundButtonStyle" TargetType="{x:Type controls:ExtendedButton}">
    <Setter Property="Width" Value="20" />
    <Setter Property="Height" Value="20" />
    <Setter Property="CornerRadius" Value="10" />
</Style>

3. 若需重写模板保留自定义能力 #

如果需要在外部样式中扩展模板，必须基于自定义控件的默认样式继承，避免丢失自定义逻辑：

<Style x:Key="CustomRoundButtonStyle" TargetType="{x:Type controls:ExtendedButton}" BasedOn="{StaticResource {x:Type controls:ExtendedButton}}">
    <Setter Property="CornerRadius" Value="10" />
    <!-- 可选：重写部分模板内容 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ExtendedButton}">
                <!-- 保留原有模板结构，仅修改需要自定义的部分 -->
                <Border
                    x:Name="border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    SnapsToDevicePixels="true">
                    <!-- 添加自定义内容 -->
                    <StackPanel Orientation="Horizontal">
                        <Ellipse Width="12" Height="12" Fill="Red" Margin="2"/>
                        <ContentPresenter
                            x:Name="contentPresenter"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Focusable="False"
                            RecognizesAccessKey="True"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

核心原理说明 #

• TargetType设为自定义控件类型后，TemplateBinding可以正确识别自定义依赖属性，避免基类Button无该属性导致的绑定失效。
• 移除ElementName绑定改用TemplateBinding，确保属性值能从控件实例正确传递到模板元素，不受样式上下文影响。
• 外部样式通过BasedOn继承自定义控件的默认样式，既能扩展模板，又不会丢失原有自定义逻辑。

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