Xaml 样式继承未按预期工作

Question

我在尝试使用 Xaml 样式的 BasedOn 属性时遇到问题。我创建了一个相当简单的样式作为示例。

该项目由两个主要文件组成。 MainWindow.xaml 和 SquareButtonStyle.xaml。 SquareButtonStyle 利用 FontAwesome.WPF 项目快速获取一些图像。

MainWindow 基本上是一系列按钮，里面有一个图像和一些文本。

此示例的目标是具有三种不同的按钮大小。 "medium" 码和两个变体，"small" 和 "large"，基于中码。

大变体最容易出现此问题。大字体所基于的中型样式中设置的中心 TextAlignment、边距和红色文本颜色已丢失。似乎我不是继承样式而只覆盖特定的属性，而是继承默认样式并覆盖属性。

我做错了什么？似乎解决这个问题的唯一方法是不要打扰 BasedOn，只需制作三个单独的样式并设置完整的属性列表。有办法解决这个问题吗？

SquareButtonStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" x:Key="SquareButtonMediumStyle">
        <Setter Property="Margin" Value="5" />
        <Setter Property="Width" Value="80" />
        <Setter Property="Height" Value="80" />
        <Style.Resources>
            <Style TargetType="StackPanel">
                <Setter Property="Orientation" Value="Vertical" />
                <Style.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="12" />
                        <Setter Property="TextAlignment" Value="Center" />
                        <Setter Property="Foreground" Value="Red"></Setter>
                        <Setter Property="TextWrapping" Value="Wrap" />
                    </Style>
                </Style.Resources>
            </Style>
        </Style.Resources>
    </Style>
    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle">
        <Setter Property="Width" Value="55" />
        <Setter Property="Height" Value="55" />
        <Style.Resources>
            <Style TargetType="StackPanel">
                <Style.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="10" />
                    </Style>
                </Style.Resources>
            </Style>
        </Style.Resources>
    </Style>
    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="100" />
        <Style.Resources>
            <Style TargetType="StackPanel">
                <Style.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="14" />
                    </Style>
                </Style.Resources>
            </Style>
        </Style.Resources>
    </Style>
</ResourceDictionary>

MainWindow.xaml

<Window x:Class="XamlStyleExample.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"
                            mc:Ignorable="d"
                            Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="SquareButtonStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <StackPanel>
        <WrapPanel>
            <WrapPanel.Resources>
                <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" />
            </WrapPanel.Resources>
            <Button>
                <StackPanel>
                    <TextBlock>Button 1</TextBlock>
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <TextBlock>Button 2</TextBlock>
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <TextBlock>Button 3</TextBlock>
                </StackPanel>
            </Button>
        </WrapPanel>
        <WrapPanel>
            <WrapPanel.Resources>
                <Style BasedOn="{StaticResource SquareButtonSmallStyle}" TargetType="Button" />
            </WrapPanel.Resources>
            <Button>
                <StackPanel>
                    <TextBlock>Button 1</TextBlock>
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <TextBlock>Button 2</TextBlock>
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <TextBlock>Button 3</TextBlock>
                </StackPanel>
            </Button>
        </WrapPanel>
        <WrapPanel>
            <WrapPanel.Resources>
                <Style BasedOn="{StaticResource SquareButtonLargeStyle}" TargetType="Button" />
            </WrapPanel.Resources>
            <Button>
                <StackPanel>
                    <TextBlock>Button 1</TextBlock>
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <TextBlock>Button 2</TextBlock>
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <TextBlock>Button 3</TextBlock>
                </StackPanel>
            </Button>
        </WrapPanel>
    </StackPanel>
</Window>

更新

根据一些答案，我想出了一个解决方案，但我不是特别喜欢它。看起来很乱。

我现在有两种键控样式。一个用于 StackPanel，一个用于 TextBlock。

MainWindow.Xaml 保持不变，但 SquaredButtonStyle.xaml 现在有：

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="TextBlock" x:Key="SpecialTextBlockStyle">
        <Setter Property="TextAlignment" Value="Center" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="TextWrapping" Value="Wrap" />
    </Style>

    <Style TargetType="StackPanel" x:Key="MediumNestedStackPanel">
        <Style.Resources>
            <Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}" />
        </Style.Resources>
    </Style>

    <Style TargetType="Button" x:Key="SquareButtonMediumStyle">
        <Setter Property="Margin" Value="5" />
        <Setter Property="Width" Value="80" />
        <Setter Property="Height" Value="80" />
        <Style.Resources>
            <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
            </Style>
        </Style.Resources>
    </Style>

    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle">
        <Setter Property="Width" Value="55" />
        <Setter Property="Height" Value="55" />
        <Style.Resources>
            <!-- 
            Implicit stack panel style in the scope of SquareButtonMediumStyle 
            inherits from MediumNestedStackPanel, adds stuff
            -->
            <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
                <Style.Resources>
                    <Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}" >
                        <Setter Property="FontSize" Value="10" />
                    </Style>
                </Style.Resources>
            </Style>
        </Style.Resources>
    </Style>

    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="100" />
        <Style.Resources>
            <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
                <Style.Resources>
                    <Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}">
                        <Setter Property="FontSize" Value="14" />
                    </Style>
                </Style.Resources>
            </Style>
        </Style.Resources>
    </Style>
</ResourceDictionary>

Answer 1

与其在 Button 样式中定义隐式 TextBlock 样式，不如设置 Button 元素本身的 FontSize、Foreground ... 属性：

<Style TargetType="Button" x:Key="SquareButtonMediumStyle">
    <Setter Property="Margin" Value="5" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Height" Value="80" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
    <Setter Property="Foreground" Value="Red"></Setter>
    <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
    <Style.Resources>
        <Style TargetType="StackPanel">
            <Setter Property="Orientation" Value="Vertical" />
        </Style>
    </Style.Resources>
</Style>

<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
    <Setter Property="FontSize" Value="14" />
</Style>

正如您已经发现的那样，您当前使用 TextBlock 隐式样式的方法不起作用。具体原因请参考以下link：

Wpf, style is not being applied

Answer 2

那些嵌套的 StackPanel 样式不会参与其包含样式的 BasedOn 继承。如果你想这样做，你必须为嵌套样式设置一个单独的继承层次结构：

<Style TargetType="StackPanel" x:Key="MediumNestedStackPanel">
    <Setter Property="Orientation" Value="Vertical" />
    <Style.Resources>
        <Style TargetType="fa:ImageAwesome">
            <Setter Property="Height" Value="35" />
            <Setter Property="Margin" Value="5" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="12" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="TextWrapping" Value="Wrap" />
        </Style>
    </Style.Resources>
</Style>

<Style TargetType="Button" x:Key="SquareButtonMediumStyle">
    <Setter Property="Margin" Value="5" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Height" Value="80" />
    <Style.Resources>
        <!-- 
        Implicit stack panel style in the scope of SquareButtonMediumStyle 
        inherits from MediumNestedStackPanel, adds nothing
        -->
        <Style 
            TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"
            />
    </Style.Resources>
</Style>

<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle">
    <Setter Property="Width" Value="55" />
    <Setter Property="Height" Value="55" />
    <Style.Resources>
        <!-- 
    Implicit stack panel style in the scope of SquareButtonMediumStyle 
    inherits from MediumNestedStackPanel, adds stuff
    -->
        <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
            <Style.Resources>
                <Style TargetType="fa:ImageAwesome" BasedOn="{StaticResource {x:Type fa:ImageAwesome}}">
                    <Setter Property="Height" Value="20" />
                </Style>
                <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
                    <Setter Property="FontSize" Value="10" />
                </Style>
            </Style.Resources>
        </Style>
    </Style.Resources>
</Style>

<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
    <Style.Resources>
        <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
            <Style.Resources>
                <Style TargetType="fa:ImageAwesome" BasedOn="{StaticResource {x:Type fa:ImageAwesome}}">
                    <Setter Property="Height" Value="60" />
                    <Setter Property="Margin" Value="5" />
                </Style>
                <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
                    <Setter Property="FontSize" Value="14" />
                </Style>
            </Style.Resources>
        </Style>
    </Style.Resources>
</Style>

Xaml 样式继承未按预期工作

Xaml Styles inheritance not working as expected

wpf

xaml

resourcedictionary

更新