wpf 如何继承 XAML 样式并覆盖子元素的属性？

How to inherit XAML style and override property of child element?

提问by Flosta

we just got started with XAML and are still fighting with basic issues: Coming from CSS we'd like to define a generic button style with custom control template and then have a second style inherit everything from the first style using "basedon. This second style should then override properties such e.g. "foreground color" (which works) but also properties of child elements within our custom template such as the "background color" of e.g. an included border element etc. (which doesn't work).

我们刚刚开始使用 XAML 并且仍在与基本问题作斗争：来自 CSS，我们想用自定义控件模板定义一个通用按钮样式，然后让第二个样式使用“basedon”继承第一个样式的所有内容。这第二个样式然后应该覆盖诸如“前景色”之类的属性（有效）以及我们自定义模板中子元素的属性，例如包含的边框元素等的“背景颜色”（无效）。

What's the general approach to go about things like this? How far can we go with cascading styles?

处理此类事情的一般方法是什么？级联样式能走多远？

Cheers!

干杯!

回答by holger

You can use an inherited style with no key reference:

您可以使用没有键引用的继承样式：

<Grid>
    <Grid.Resources>
        <!-- Definition of default appearance of a button -->
        <Style TargetType="Button" x:Key="Default">
            <Setter Property="Background" Value="Red"></Setter>
            <Setter Property="FontFamily" Value="Segoe Black" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="32pt" />
            <Setter Property="Foreground" Value="#777777" />
        </Style>
        <!-- Define general style that based is base on the default style of the button without a key reference-->
        <Style TargetType="Button" BasedOn="{StaticResource Default}"/>

        <!-- In sub style override the properties you need -->
        <Style BasedOn="{StaticResource Default}" TargetType="Button" x:Key="SubButton" >
            <Setter Property="FontSize" Value="8pt" />
        </Style>

    </Grid.Resources>

    <Button Content="Main" Height="51" HorizontalAlignment="Left" Margin="154,72,0,0" Name="button1" VerticalAlignment="Top" Width="141" />
    <Button Content="Sub" Style="{StaticResource SubButton}" Height="51" HorizontalAlignment="Left" Margin="154,162,0,0" Name="button2" VerticalAlignment="Top" Width="141" />
</Grid>

回答by honzakuzel1989

I have (In my WPF application) default (base) styles defined in ResourceDictionary in App.xaml (in startup project). For example for button as follows.

我（在我的 WPF 应用程序中）在 App.xaml（在启动项目中）的 ResourceDictionary 中定义了默认（基本）样式。例如按钮如下。

    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="FontSize" Value="16"/>
    </Style>

In all views I use (by default) this general style (automatically inherited)! When I need to change or add some property in default style (defined in App.xaml) I create new style based on default style.

在所有视图中，我（默认情况下）使用这种通用样式（自动继承）！当我需要更改或添加默认样式（在 App.xaml 中定义）中的某些属性时，我会根据默认样式创建新样式。

    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <!-- change -->
        <Setter Property="Margin" Value="10" />
        <!-- add -->
        <Setter Property="Foreground" Value="Red" />
    </Style>

When I need hide or strongly redefined default style (in some view) I create new style (based on nothing).

当我需要隐藏或强烈重新定义默认样式（在某些视图中）时，我会创建新样式（基于任何内容）。

    <Style TargetType="Button"/>

You can, of course, continues in inheritance in App.xaml or in specific view. You can based new namedstyle on default style and use new style by name. For example RedButton and GreenButton style.

当然，您可以在 App.xaml 或特定视图中继续继承。您可以基于默认样式的新命名样式并按名称使用新样式。例如 RedButton 和 GreenButton 样式。

    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="RedButton">
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="GreenButton">
        <Setter Property="Foreground" Value="Green" />
    </Style>

Etc...

等等...

NOTE:instead define your style in App.xaml you can use standalone library (dll) with styles only and ResourceDictionary from your library to App.xaml ResourceDictionary.MergedDictionaries.

注意：相反，在 App.xaml 中定义您的样式，您可以使用仅包含样式的独立库 (dll)，并将库中的 ResourceDictionary 用于 App.xaml ResourceDictionary.MergedDictionaries。

回答by Quartermeister

The standard approach to making a customizable control template is to use TemplateBinding in the template to bind to properties of the control, and then to set those properties in the child styles.

制作可自定义控件模板的标准方法是在模板中使用 TemplateBinding 绑定到控件的属性，然后在子样式中设置这些属性。

For example, this creates a button template with a Border control, and binds the Background of the Border to the Background property of the Button. By setting the Background property of the Button in other styles, it changes the Background property of the Border.

例如，这将创建一个带有边框控件的按钮模板，并将边框的背景绑定到按钮的背景属性。其他样式通过设置Button的Background属性，改变Border的Background属性。

<StackPanel>
    <StackPanel.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="BlueButtonStyle" TargetType="Button"
               BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="RedButtonStyle" TargetType="Button"
               BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </StackPanel.Resources>
    <Button Style="{StaticResource RedButtonStyle}">Red</Button>
    <Button Style="{StaticResource BlueButtonStyle}">Blue</Button>
</StackPanel>

Many of the properties on Control are intended to be used in control templates, and won't affect other behavior if they are changed. They are BorderBrush, BorderThickness, Background, Padding, HorizontalContentAlignment, and VerticalContentAlignment.

Control 上的许多属性旨在用于控件模板，并且如果更改它们不会影响其他行为。它们是 BorderBrush、BorderThickness、Background、Padding、Horizo​​ntalContentAlignment 和 VerticalContentAlignment。