根据事件和视图模型属性更改按钮背景颜色

本文关键字：按钮 背景 颜色 属性 模型 事件 视图 | 更新日期: 2023-09-27 18:08:04

我有一个按钮，可以在一个三种模式:

  • 正常-没有鼠标悬停且未被选中
  • 悬停-鼠标悬停而未被选中
  • Selected -视图模型(DataContext)中的一个名为IsSelected的属性等于true

这是我当前的代码:

<Style x:Key="FlatButtonStyle" TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Orange"/>
            </Trigger>
            <DataTrigger Binding="{Binding IsSelected}">
                <Setter Property="Background" Value="Yellow"/>
            </DataTrigger>
        </Style.Triggers>
        <Setter Property="Background" Value="Gray" />           
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Width" Value="125"/>
        <Setter Property="Height" Value="35"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border BorderThickness="0"
                            Background="{TemplateBinding Background}"
                            CornerRadius="12">
               <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

但是，只有Hover和normal状态有效。我尝试过数据触发器，可视化状态管理器，但我是WPF的新手，无法使其工作。

根据事件和视图模型属性更改按钮背景颜色

您的IsSelected触发值缺失。如果你想坚持使用按钮，使用

<DataTrigger Binding="{Binding IsSelected}" Value="True">
    <Setter Property="Background" Value="Yellow"/>
</DataTrigger>

我建议在IsChecked属性上使用ToggleButton和Trigger 

<ToggleButton IsChecked="{Binding IsSelected}" Style="{StaticResource FlatButtonStyle}"/>
<Style x:Key="FlatButtonStyle" TargetType="ToggleButton">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Orange"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Yellow"/>
        </Trigger>
    </Style.Triggers>
    <Setter Property="Background" Value="Gray" />
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Width" Value="125"/>
    <Setter Property="Height" Value="35"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border BorderThickness="0"
                Background="{TemplateBinding Background}"
                CornerRadius="12">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

尝试使用切换按钮而不是按钮控件。它的默认状态是IsChecked。下面是如何使用切换按钮

的示例http://miteshsureja.blogspot.ae/2011/12/wpf-toggle-button.html

相关文章：