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>

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

已编辑以解决您的意见

您似乎正在尝试使用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>

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

1 个答案: