WPF ToggleButton 模板 BorderBrush

Question

**編輯 - 我將 DynamicResource 答案標記為對此的答案。 這解決了我在這里描述的問題。 我在我的主應用程序中仍然遇到問題，結果是因為我在其他地方使用畫筆作為靜態資源，然后在我的邊框上使用它作為動態資源。 當我將所有內容都切換到 DynamicResource 時，它​​工作正常。 謝謝！

我似乎無法讓 BorderBrush 在模板化的 ToggleButton 中工作。 這是我的示例 .xaml，如果您運行它，您會看到當鼠標懸停或選中其中一個按鈕時邊框變得透明。

<Window x:Class="ToggleButtonStyle.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"
    xmlns:local="clr-namespace:ToggleButtonStyle"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <!-- <ResourceDictionary Source="Dictionary1.xaml" /> -->
    <!-- main color of buttons-->
    <Color x:Key="MainThemeColor">Orange</Color>

    <!-- hover-over color for buttons -->
    <Color x:Key="MouseOverColor">Purple</Color>

    <!-- 5. Mouse over background color for step buttons -->
    <SolidColorBrush x:Key="MouseOverBackgroundBrush" Color="{DynamicResource MouseOverColor}"/>

    <!-- 6. Background color active step -->
    <SolidColorBrush x:Key="CheckedBackgroundBrush" Color="{DynamicResource MainThemeColor}"/>

    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="MinWidth" Value="80"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness ="{TemplateBinding BorderThickness}" Padding="5" Margin="2">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Background" Value="{StaticResource MouseOverBackgroundBrush}" />
                <Setter Property="Foreground" Value="#333333" />
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource MouseOverBackgroundBrush}"/>
                <Setter Property="Background" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Foreground" Value="#ffffff"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel Orientation="Horizontal">
        <ToggleButton Style="{DynamicResource ToggleButtonStyle}">Button 1</ToggleButton>
        <ToggleButton Style="{DynamicResource ToggleButtonStyle}">Button 2</ToggleButton>
        <ToggleButton Style="{DynamicResource ToggleButtonStyle}">Button 3</ToggleButton>
    </StackPanel>
</Grid>

Answer 1

使用 Rectangle 似乎有效。 看看這個： DynamicResource 顏色不適用於邊框上的 BorderBrush - 錯誤？ . 對我來說這不應該工作沒有任何意義。

<Style TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="{DynamicResource MouseOverBackgroundBrush}"/>
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="MinWidth" Value="80"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid>
                        <Rectangle Fill="{TemplateBinding Background}"
                                   Stroke="{TemplateBinding BorderBrush}"
                                   StrokeThickness="{TemplateBinding BorderThickness}" 
                                   Margin="2">
                        </Rectangle>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Background" Value="{StaticResource MouseOverBackgroundBrush}" />
                <Setter Property="Foreground" Value="#333333" />
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource MouseOverBackgroundBrush}"/>
                <Setter Property="Background" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Foreground" Value="#ffffff"/>
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 2

由於 Brushes 的 Color 屬性是使用Dynamic Resource 標記擴展設置的，因此您還應該使用Dynamic Resource 在 setter 中設置屬性：

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="BorderBrush" Value="{DynamicResource CheckedBackgroundBrush}" />
        <Setter Property="Background" Value="{DynamicResource MouseOverBackgroundBrush}" />
        <Setter Property="Foreground" Value="#333333" />
    </Trigger>
    <Trigger Property="IsChecked" Value="True">
        <Setter Property="BorderBrush" Value="{DynamicResource MouseOverBackgroundBrush}"/>
        <Setter Property="Background" Value="{DynamicResource CheckedBackgroundBrush}" />
        <Setter Property="Foreground" Value="#ffffff"/>
    </Trigger>
</Style.Triggers>

如果您使用StaticResource ，一旦在運行時實際查找了動態顏色資源，setter 的值就不會更新。