0

当光标悬停在按钮上时，我希望按钮的背景发生变化。
我设法以一种使用“IsMouseOver”触发器的样式来做到这一点，该触发器将按钮的背景设置为红色。

当点击事件发生时，我还希望按钮在两种颜色之间改变它的背景。
我已经设法在蓝色和绿色之间切换的窗口的代码隐藏中做到了这一点。

问题
只要我不单击按钮，触发器就会按预期工作。
当我单击按钮时，背景会按预期更改为蓝色或绿色。
如果我随后将按钮悬停，则在用光标悬停时背景不会设置为红色。

XAML 代码

<Window x:Class="Main.MainWindow">

    <Window.Resources>
        <Style x:Key="FooStyle" TargetType="Button">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Background" Value="Blue" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="Transparent">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel Orientation="Vertical">
        <Button x:Name="btnFoo"
                Content="Foo"
                Width="100" 
                Click="Foo_Click" 
                Style="{StaticResource FooStyle}" />
    </StackPanel>

</Window>

窗口代码隐藏

private void Foo_Click(object sender, RoutedEventArgs e)
{
    btnFoo.Background = btnFoo.Background == Brushes.Blue ? Brushes.Lime : Brushes.Blue;
}

我怀疑触发器确实有效，但问题在于这里的其他东西。

可能是什么问题呢？
如何解决这个问题？

4

2 回答 2

1

可能是什么问题呢？

如文档中所述，本地值优先于样式设置器和触发器的事实。

如何解决这个问题？

例如，通过将触发器移动到ControlTemplate：

<Style x:Key="FooStyle" TargetType="Button">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Background" Value="Blue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="Transparent">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Red" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2021-05-24T14:48:37.447 回答
0

在此处输入图像描述

<Window.Resources>
            <Style x:Key="FooStyle" TargetType="Button">
                <Setter Property="Foreground" Value="White" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Background" Value="Blue" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderBrush="Transparent">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Red" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Window.Resources>
        <Grid>
            <StackPanel Orientation="Vertical">
                <Button x:Name="btnFoo"
                    Content="Foo"
                    Width="100" 
                    Click="BtnFoo_Click" 
                    MouseEnter="BtnFoo_MouseEnter"
                    MouseLeave="BtnFoo_MouseLeave"
                    Style="{StaticResource FooStyle}" />
            </StackPanel>
    
        </Grid>

Code Behind

    Brush color { get; set; }
            private void BtnFoo_Click(object sender, RoutedEventArgs e)
            {
                color= color == Brushes.Lime ? Brushes.Blue : Brushes.Lime;
                btnFoo.Background = color;
            }
    
            private void BtnFoo_MouseEnter(object sender, MouseEventArgs e)
            {
              
                btnFoo.ClearValue(Button.BackgroundProperty);
            }
    
            private void BtnFoo_MouseLeave(object sender, MouseEventArgs e)
            {
                btnFoo.Background = color==null?btnFoo.Background:color;
            }
于 2021-05-24T12:29:23.367 回答