如何缩短BasedOn样式

Question

我目前正在为我们的应用程序创建一个"基本样式"。我首先为我们的按钮创建了一个"基本样式"，这将是一个漂亮的双梯度(我创建了一个模板，有2行，每一行都有一个两点梯度)。

基本按钮工作得很好，现在我想基于这个样式创建其他按钮

基本按钮的代码:

<Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Height" Value="24"/>
    <Setter Property="Width" Value="150" />
    <Setter Property="Foreground" Value="{DynamicResource OffWhiteBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5">
                    <Grid x:Name="LayoutGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/>
                        <Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/>
                        <ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Margin" TargetName="OuterBorder" Value="1"/>
                        <Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/>
                        <Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopBlueGradientBrush}"/>
                        <Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomBlueGradientBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当我创建第二个按钮时，我可以将其命名为"BasedOn"，另一种样式:

<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
 ...

在网格内，我已经命名了我的梯度:topborder和bottomborder。问题是，我需要复制代码，以便能够设置任何代码，因为redbuttonStyle不知道topborder或bottomborder:

<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5">
                    <Grid x:Name="LayoutGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/>
                        <Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/>
                        <ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Margin" TargetName="OuterBorder" Value="1"/>
                        <Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/>
                        <Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopRedGradientBrush}"/>
                        <Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomRedGradientBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这里的问题是，我几乎重复了整个样式，而我只想改变IsMouseOver事件的两个渐变

我该如何处理这个?

p。我已经看过这个WPF—覆盖样式颜色，最佳实践，但我不能找出TemplateBinding:/

Answer 1

您可以使用一种技术，在单独的类中定义特定于主题的属性，然后从模板绑定到这些属性。请看我对这个问题的回答。