如何在鼠标悬停时更改按钮颜色

Question

我是 XAML 的新手。 我在资源文件中有我的样式，该样式将自动应用于我的应用程序中的所有按钮。 但是某些情况已经改变，我要做的是，如果应用程序中存在任何删除按钮，请将鼠标悬停颜色更改为白色，其他按钮鼠标悬停颜色保持不变。我试过了，但是鼠标悬停事件改变了所有按钮的背景颜色，但我想要的只是删除按钮颜色应该改变我只需要设计面

Before Mouse Hover

after Mouse Hover

我的代码是：

<Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="3" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="BorderThickness" Value="2">
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="DELETE">
                <Setter Property="Background" Value="#990000"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
                <Setter Property="Background" Value="#990000"></Setter>
            </DataTrigger>

            <DataTrigger Binding="{Binding ElementName=delete,  Path=IsMouseOver}" Value="True">
                <Setter Property="Background" Value="White"/>

                <Setter Property="BorderBrush" Value="Red"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

<Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button">
        <Setter Property="FontSize" Value="16"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                         <Border x:Name="BaseShape" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                        <Rectangle x:Name="ButtonHighlight" Margin="1" RadiusX="9" RadiusY="9" Stroke="{StaticResource ButtonHoverHighlightBorderBrush}" StrokeThickness="1" Grid.ColumnSpan="2" Opacity="0" />
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Rectangle x:Name="FocusedVisualElement" Stroke="{StaticResource ButtonFocusedBorderBrush}" StrokeThickness="1"  RadiusX="10" RadiusY="10" Opacity="0" />
                        <Rectangle x:Name="DisabledVisualElement" Fill="Chartreuse" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<Grid>
    <Button Content="Delete" Name="delete" Width="50" Height="50" HorizontalAlignment="Right" Margin="0,70.121,170.028,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    <Button x:Name="button" Content="Kii" Width="50" Height="50" HorizontalAlignment="Left" Margin="186.349,70.121,0,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    <Button x:Name="button1" Content="ZeKiillo" Width="50" Height="50" HorizontalAlignment="Left" Margin="82.075,70.121,0,0" VerticalAlignment="Top"></Button>
</Grid>

Answer 1

您可以使用MultiTrigger 来检查IsMouseOver 和Content 属性：

<Style x:Key="BaseButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Padding" Value="3" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="BorderThickness" Value="2">
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
            <Setter Property="Background" Value="#990000"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
            <Setter Property="Background" Value="#990000"></Setter>
        </DataTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="Content" Value="Delete" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderBrush" Value="Red"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

请记住，这些值区分大小写。 “DELETE”与“Delete”的值不同。

Answer 2

像这样去：

        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Green" />
            <Setter Property="BorderBrush" Value="Blue" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="BorderThickness" Value="2">
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
                    <Setter Property="Background" Value="#990000"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
                    <Setter Property="Background" Value="#990000"></Setter>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding
                                   RelativeSource={
                                   RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}},
                                   Path=IsMouseOver}" Value="True"/>
                        <Condition Binding="{Binding Content}" Value="Delete"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

MultiDataTrigger 和 RelativeResource 在这里解决