按钮上的IsMouseOver属性不起作用

问题描述 投票:0回答:1

我有这个按钮,如果我用鼠标悬停在它上面,我想改变设计。它没有用,我没有收到错误。我究竟做错了什么? (我是WPF的新手)

    <Button MaxWidth="180"
            Margin="5"
            DockPanel.Dock="Top"
            Padding="5"
            FontSize="12"
            Foreground="#1261AC"
            FontWeight="SemiBold"
            BorderBrush="Transparent">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border CornerRadius="5" Background="LightGray" BorderThickness="1" Padding="5">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Foreground" Value="#157ec4"/>
                        <Setter Property="Background" Value="#000000"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

按钮本身正在工作,但它不会改变背景或字体的颜色。 (我的示例中的颜色仅用于测试)

wpf xaml button triggers mouseover
1个回答
0
投票

您的代码的问题是您直接将border-background定义为灰色。现在,您可以使用触发器更改控件背景。但是,触发器设置的背景与示例中的边框背景尚未关联。我添加了一个模板绑定,可以解决这个问题。现在,模板中的边框将始终在您的样式中定义背景,由触发器设置或直接在XAML中设置。

请注意:如果使用<Button Background="Pink"/>在XAML中设置颜色,则会覆盖样式和触发器属性。

试试这件艺术品:

enter image description here

<Button Content="Hello there!"
    MaxWidth="180"
    Margin="5"
    DockPanel.Dock="Top"
    Padding="5"
    FontSize="12"
    Foreground="#1261AC"
    FontWeight="SemiBold"
    BorderBrush="Transparent">
<Button.Style>
    <Style TargetType="Button">
        <Setter Property="Background" Value="HotPink"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1" Padding="5">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="Background" Value="Lime" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Button.Style>

© www.soinside.com 2019 - 2024. All rights reserved.