WPF样式：基于模板，但更改2种不同的背景颜色

Question

我有一个带ControlTemplate的按钮，这个ControlTemplate有2个不同的Control，具有不同的背景颜色。我希望能够使用基于这种主要风格的新风格来改变这些颜色。

阅读代码，它应该更有意义。出于某种原因，尽管新的Style.Resources没有改变背景颜色，但它们仍然使用主要样式中定义的两个。

我该如何解决这个问题？

Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greenSmallButton">
            <Style.Resources>
                <SolidColorBrush Color="#FF8AB71C" x:Key="colour1" />
                <SolidColorBrush Color="#FF72A000" x:Key="colour2" />
            </Style.Resources>
        </Style>

        <Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greySmallButton">
            <Style.Resources>
                <SolidColorBrush Color="#FF434953" x:Key="colour1" />
                <SolidColorBrush Color="#FF22252b" x:Key="colour2" />
            </Style.Resources>
        </Style>

        <Style x:Key="ButtonIcoSmall" TargetType="Button">
            <Style.Resources>
                <SolidColorBrush Color="#FF434953" x:Key="colour1" />
                <SolidColorBrush Color="#FF22252b" x:Key="colour2" />
            </Style.Resources>

            <Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="8" />
            <Setter Property="Margin" Value="6" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <WrapPanel>
                            <Border Grid.Column="0"
                                    CornerRadius="5 0 0 5" 
                                    BorderThickness="0"
                                    Background="{StaticResource colour1}"
                                    Name="buttonIcon">
                                <WrapPanel>
                                    <ContentPresenter Grid.Column="0" 
                                                      HorizontalAlignment="Center" 
                                                      VerticalAlignment="Center" 
                                                      Margin="{TemplateBinding Margin}" />
                                </WrapPanel>
                            </Border>
                            <Border Grid.Column="0"
                                    CornerRadius="0 5 5 0" 
                                    BorderThickness="0"
                                    Background="{StaticResource colour2}"
                                    Name="buttonText" >
                                <TextBlock Text="{TemplateBinding Tag}" 
                                                       FontSize="13"
                                                       Foreground="White"
                                                       Padding="{TemplateBinding Padding}" />
                            </Border>
                        </WrapPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{Binding ElementName=buttonIcon}" TargetName="buttonText" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!--<Setter Property="Background" Value="#757b8d" />
                    <Setter Property="Foreground" Value="White" />-->
                </Trigger>
            </Style.Triggers>
        </Style>

Answer 1

两件事：

1. 您应该将主要样式移到派生样式之上。如果你在它所基于的样式之前使用BasedOn，它就找不到它。
2. 对于要更改的颜色，请改用DynamicResource。这允许重新定义两种颜色，而不是使用默认值。

我使用以下代码使用它：

<Window x:Class="WpfApplication1.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"
        x:Name="TestWindow">
    <Window.Resources>

        <Style x:Key="ButtonIcoSmall" TargetType="Button">
            <Style.Resources>
                <SolidColorBrush Color="#FF434953" x:Key="colour1" />
                <SolidColorBrush Color="#FF22252b" x:Key="colour2" />
            </Style.Resources>

            <Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="8" />
            <Setter Property="Margin" Value="6" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <WrapPanel>
                            <Border Grid.Column="0"
                                    CornerRadius="5 0 0 5" 
                                    BorderThickness="0"
                                    Background="{DynamicResource colour1}"
                                    Name="buttonIcon">
                                <WrapPanel>
                                    <ContentPresenter Grid.Column="0" 
                                                      HorizontalAlignment="Center" 
                                                      VerticalAlignment="Center" 
                                                      Margin="{TemplateBinding Margin}" />
                                </WrapPanel>
                            </Border>
                            <Border Grid.Column="0"
                                    CornerRadius="0 5 5 0" 
                                    BorderThickness="0"
                                    Background="{DynamicResource colour2}"
                                    Name="buttonText" >
                                <TextBlock Text="{TemplateBinding Tag}" 
                                                       FontSize="13"
                                                       Foreground="White"
                                                       Padding="{TemplateBinding Padding}" />
                            </Border>
                        </WrapPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{Binding ElementName=buttonIcon}" TargetName="buttonText" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!--<Setter Property="Background" Value="#757b8d" />
                    <Setter Property="Foreground" Value="White" />-->
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greenSmallButton">
            <Style.Resources>
                <SolidColorBrush Color="#FF8AB71C" x:Key="colour1" />
                <SolidColorBrush Color="#FF72A000" x:Key="colour2" />
            </Style.Resources>
        </Style>

        <Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greySmallButton">
            <Style.Resources>
                <SolidColorBrush Color="#FF434953" x:Key="colour1" />
                <SolidColorBrush Color="#FF22252b" x:Key="colour2" />
            </Style.Resources>
        </Style>
    </Window.Resources>
    <Button Style="{StaticResource greenSmallButton}"/>
</Window>