不同目标类型之间的样式继承

Question

不知道是不是我理解的不对。我正在尝试为我的应用程序制作 2 种不同的按钮样式：BlueOnWhiteButton 和 WhiteOnBlueButton。

这两个按钮应该是一样的，但是前景和背景是相反的。到此为止，太简单了。

关键是：我需要我的按钮有圆角。这个简单的需求，看起来终究不是那么简单。两个版本上可能还有不同颜色的小边框。

使用我在 google 和堆栈上找到的一些东西，我想出了第一个样式，看起来很有希望：

<Style  x:Key="WhiteOnBlueButton"
        TargetType="Button">

    <Setter Property="Background" Value="{StaticResource MainBlue}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontWeight" Value="bold" />

    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="5" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
        </Style>
    </Style.Resources>
</Style>

到目前为止一切顺利，我的按钮符合我的要求。但是，当我尝试在下面制作第二种样式时，由于 Style.Resources 重新定义，我在运行时遇到错误。我会把代码块保存给你，图形相同，但名称不同，颜色相反。

我尽量保持样式的使用尽可能简单，我尝试过带模板的版本，但它使样式变得更加复杂，我什至丢失了按钮文本...

我想要的是这样的：

<Style x:Key="RoundedButtonCornersNoBorder" TargetType="Border">
    <Setter Property="CornerRadius" Value="4"/>
    <Setter Property="BorderThickness" Value="0" />
</Style>
                    
<Style x:Key="RoundedButtonCorners" TargetType="Border">
    <Setter Property="CornerRadius" Value="4"/>
    <Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
    <Setter Property="BorderThickness" Value="2" />
</Style>

<Style  x:Key="WhiteOnBlueButton"
        TargetType="Button">

    <Setter Property="Background" Value="{StaticResource MainBlue}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontWeight" Value="bold" />
    <!-- Somehow tell the borders should be taken from the style RoundedButtonCornersNoBorder-->
</Style>

<Style  x:Key="BlueOnWhiteButton"
    TargetType="Button">

    <Setter Property="Background" Value="White" />
    <Setter Property="Foreground" Value="{StaticResource MainBlue}" />
    <Setter Property="FontWeight" Value="bold" />
    <!-- Somehow tell the borders should be taken from the style RoundedButtonCorners-->
</Style>

有什么方法可以不用写 300 行难懂的代码就可以实现吗？

最终目标是通过简单地执行以下操作来应用样式：

<Button
    Style="{DynamicResource WhiteOnBlueButton}"
    Content="CLICK ME!" />

Answer 1

您可以在公共基础样式的资源中移动边框样式，并通过 BasedOn 属性.

从公共基础样式派生最终的按钮样式

不要在边框样式中设置 BorderBrush，而是在基本或最终按钮样式中设置。按钮模板中的边框将通过 TemplateBinding 从按钮中选取它。

<Style x:Key="RoundedButtonCorners" TargetType="Button">
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="5"/>
            <Setter Property="BorderThickness" Value="2"/>
        </Style>
    </Style.Resources>
    <Setter Property="BorderBrush" Value="{StaticResource LightBlue}"/>
    <Setter Property="FontWeight" Value="Bold" />
</Style>

<Style x:Key="WhiteOnBlueButton" TargetType="Button"
       BasedOn="{StaticResource RoundedButtonCorners}">
    <Setter Property="Background" Value="{StaticResource MainBlue}"/>
    <Setter Property="Foreground" Value="White"/>
</Style>

<Style x:Key="BlueOnWhiteButton" TargetType="Button"
       BasedOn="{StaticResource RoundedButtonCorners}">
    <Setter Property="Background" Value="White"/>
    <Setter Property="Foreground" Value="{StaticResource MainBlue}"/>
</Style>

Answer 2

原来我们有一个库，它有一个直接显示边框的按钮。

最终样式如下所示：

<Style x:Key="WhiteOnBlueButton" TargetType="telerik:RadButton">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="{StaticResource MainBlue}" />
    <Setter Property="FontWeight" Value="bold" />
                        
    <Setter Property="CornerRadius" Value="5" />
    <Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
    <Setter Property="BorderThickness" Value="0" />
</Style>

<Style x:Key="BlueOnWhiteButton" TargetType="telerik:RadButton">
    <Setter Property="Foreground" Value="{StaticResource MainBlue}" />
    <Setter Property="Background" Value="White" />
    <Setter Property="FontWeight" Value="bold" />

    <Setter Property="CornerRadius" Value="5" />
    <Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
    <Setter Property="BorderThickness" Value="0" />
</Style>

然后构建我的按钮：

<telerik:RadButton
    x:Name="xamlFullTextSearchButton"
    Style="{StaticResource BlueOnWhiteButton}"
    Grid.Column="2"
    Grid.Row="0"
    Content="CLICK ME"
    CornerRadius="4"/>

有了这个，我什至不会松开点击动画！它非常适合我的需要！

不同目标类型之间的样式继承

Style inherittance between different target types

wpf

xaml