Question

我正在尝试创建一个具有特定颜色的按钮（例如红色）。在MouseOver上，按钮颜色会变为其他颜色（比如黑色）。

这是我尝试过的：

<Style x:Key="CategoryButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

我用它作为：

<Button x:Name="btnCat1" Click="btnCat1_Click" Background="#FFFF1D1D" Style="{StaticResource CategoryButton}">
    Hello ...
</Button>

问题在于我说Background="#FFFF1D1D"触发颜色没有对按钮进行任何更改。

Answer 1

那是因为你在Button声明中指定了Background（换句话说是本地值），它优先于Style触发器。 WPF的属性优先级在msdn，Dependency Property Value Precedence中描述。

该页面的简短摘录，其中包含此问题的相关属性：

首先列出最高优先级    3.当地价值    6.风格触发器。
  8.样式设定者

解决方法是删除本地值并使用Style设置它。

<Button x:Name="btnCat1"
        Click="btnCat1_Click"
        Style="{StaticResource CategoryButton}">
    Hello ...
</Button>

<Style x:Key="CategoryButton" TargetType="Button">
    <!-- Set background property here -->
    <Setter Property="Background" Value="#FFFF1D1D" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Black"/>
        </Trigger>
    </Style.Triggers>
</Style>

如果您不想为所有CategoryButton

设置背景，您也可以继承该样式

<Style x:Key="RedCategoryButton"
       BasedOn="{StaticResource CategoryButton}"
       TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#FFFF1D1D" />
</Style>

Answer 2

您可以使用下面显示的WPF中的XAML按钮样式的扩展示例（放入Windows ResourceDictionary文件中）：

<Style TargetType="Button" x:Key="Button_Command">
    <Setter Property="Foreground" Value="#a0a0a0"/>
     <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="ButtonBackground" BorderBrush="#909090">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    <Border.BorderThickness>0</Border.BorderThickness>
                    <Border.CornerRadius>2</Border.CornerRadius>
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#e0e0e0" Offset="0" />
                            <GradientStop Color="#808080" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                         <Setter TargetName="ButtonBackground" Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                                    <GradientStop Color="#f0f0f0" Offset="0" />
                                    <GradientStop Color="#c0c0c0" Offset="0.81" />
                                    <GradientStop Color="#d50101" Offset="0.81" />
                                    <GradientStop Color="#f50101" Offset="1" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="ButtonBackground" Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                                    <GradientStop Color="#f0f0f0" Offset="0" />
                                    <GradientStop Color="#c0c0c0" Offset="0.75" />
                                    <GradientStop Color="#d50101" Offset="0.75" />
                                    <GradientStop Color="#f50101" Offset="1" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

请注意与<Trigger Property="IsMouseOver" Value="True">和<Trigger Property="IsPressed" Value="True">

鼠标悬停时更改按钮颜色 - XAML

2 个答案: