在xaml wpf中更改鼠标悬停时的特定按钮背景颜色

Question

过去三天我一直在努力解决这个问题。 我必须在鼠标悬停时更改特定的按钮背景颜色，并且应该删除按钮内容，但是如果我悬停在按钮上，我会遇到所有按钮都更改的问题。 我把我的设计放在资源字典里 下面是我的设计代码

<VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="MouseOver">
                  <Storyboard>`<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaseShape" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonHoverBackgroundBrush}" />
                         </ObjectAnimationUsingKeyFrames>
                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaseShape" Storyboard.TargetProperty="BorderBrush">
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonHoverBorderBrush}" />
        </ObjectAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonHighlight" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1" />
                     </DoubleAnimationUsingKeyFrames>
                 </Storyboard>
          </VisualState> </VisualStateGroup></VisualStateManager.VisualStateGroups>'
                             <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="{StaticResource DisabledBackgroundBrush}" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />

<Button Content="delete" Name="xyz" Width="70"Margin="0,65,59,4" HorizontalAlignment="Right">      
           </Button>`

和 Xaml 带有设计的文件是 我只需要修复设计方面，而不是在后面的代码中

Answer 1

我假设“鼠标悬停时的按钮背景颜色和按钮内容应该被删除”你的意思是你想在鼠标悬停在按钮上时更改颜色并隐藏内容。如果是这样，你为什么不做这样的事情

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

虽然它不会删除内容，但它会将前景和背景设置为相同的颜色，因此对用户隐藏。

针对您的 cmets 进行了编辑

您似乎在尝试使用 DataTrigger；正如answer 建议的那样，触发器非常适合对 OnMouseOver 等内容进行更改，而 DataTriggers 非常适合对数据更改进行更改。因此，除非我遗漏了什么，否则您应该使用 Trigger 而不是 DataTrigger。

解决样式变化问题的一个明显方法是创建一个包含大部分样式的默认样式，然后创建一个覆盖变化元素的第二个样式。在这种情况下，您的第二种样式会给它“在鼠标悬停时隐藏我的文本”行为。

你的默认样式可能是这样的

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

你的第二种风格可能是这样的

<Style x:Key="ButtonHideTextOnMouseOverStyle" BasedOn="{StaticResource ButtonDefaultStyle}" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>
</Style>

然后你会像这样使用它们

<Button Content="First Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Second Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Delete" Style="{StaticResource ButtonHideTextOnMouseOverStyle}"/>

在 ButtonDefaultStyle 情况下，蓝色背景上的白色文本会在鼠标悬停时更改为白色背景上的蓝色文本。在 ButtonHideTextOnMouseOverStyle 情况下，蓝色背景上的白色文本在鼠标悬停时更改为白色背景上的白色文本。

完整的例子在这里

<Window x:Class="Button_Test.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:Button_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="Foreground" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="ButtonHideTextOnMouseOverStyle" BasedOn="{StaticResource ButtonDefaultStyle}" TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBlock Text="Buttons"/>
        <Button Content="First Button" Style="{StaticResource ButtonDefaultStyle}"/>
        <Button Content="Second Button" Style="{StaticResource ButtonDefaultStyle}"/>
        <Button Content="Delete" Style="{StaticResource ButtonHideTextOnMouseOverStyle}"/>
    </StackPanel>
</Window>