不同目標型別之間的樣式繼承

我不知道是不是我理解的不對。我正在嘗試為我的應用程式制作 2 種不同的按鈕樣式：BlueOnWhiteButton 和 WhiteOnBlueButton。

這兩個按鈕應該是相同的，但前景和背景是相反的。到目前為止，哦，太簡單了。

這里有一個問題：我需要我的按鈕有圓角。這個簡單的要求，似乎并沒有那么簡單。兩個版本上也可能有不同顏色的小邊框。

使用我在 google 和 stack 上找到的一些東西，我為第一個提出了這種風格，它看起來很有希望：

<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!" />

uj5u.com熱心網友回復：

您可以在公共基本樣式的資源中移動邊框樣式，并通過BasedOn屬性從公共基本樣式派生最終按鈕樣式。

不要BorderBrush在邊框樣式中設定 ，而是在基本或最終按鈕樣式中設定。按鈕模板中的邊框將通過模板系結從按鈕中獲取它。

<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>

uj5u.com熱心網友回復：

原來我們有一個庫，它有一個直接暴露邊框的按鈕。

最終樣式如下所示：

<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"/>

有了這個，我什至不會失去點擊影片！它非常適合我的需要！

標籤：小白 xaml

上一篇：Angular在開發模式下運行

下一篇：選中ToggleButton時，如何更改ToggleButton的邊框角半徑？