如何缩短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>

当我创建第二个按钮时，我可以“基于”另一个样式：

<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事件的两个渐变

我该如何处理？

PS。我看过这个WPF -- override style colors, best practice，但我无法弄清楚TemplateBinding：/

Answer 1

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