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 的值就不会更新。