代码隐藏更改背景/前景后丢失样式触发器

Question

我试图制作像discord 这样的按钮，它具有三种状态。活动（单击后）、完全不活动并将鼠标悬停在上面。所有这三种状态都会改变颜色问题出现在 Click 事件之后，因为为了将其更改为基本状态，我直接设置了 BG/FR。当我这样做时，鼠标悬停事件将在该按钮中停止工作。有什么想法如何将 bg/fr 设置为其初始值而不影响样式的触发器吗？我尝试使用动态颜色，但它根本无法设置。所以我有点迷失了，说实话。按钮的样式：        <Style x:Key="MainMenuStyle" TargetType="{x:Type Button}">            <Setter Property="Background" Value="#FF303136"/>            <Setter Property="Foreground" Value="#FF6F7074"/>            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type Button}">                        <Border Background="{TemplateBinding Background}" Padding="30, 0, 0, 0">                            <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/>                        </Border>                    </ControlTemplate>                </Setter.Value>            </Setter>            <Style.Triggers>                <Trigger Property="IsMouseOver" Value="True">                    <Setter Property="Background" Value="#FF2A2A32"/>                    <Setter Property="Foreground" Value="#FFBBBCB8"/>                </Trigger>            </Style.Triggers>        </Style>

Answer 1

依赖属性概述：

绑定被视为本地值，这意味着如果您设置另一个本地值，您将消除绑定。有关详细信息，请参阅依赖属性值优先级。

如果您对该Click事件感兴趣，那么您应该使用EventTrigger(或)使用 XAMLVisualStateManager来操作状态：Button

<Style x:Key="MainMenuStyle"

       TargetType="{x:Type Button}">

  <Setter Property="Background"

          Value="#FF303136" />

  <Setter Property="Foreground"

          Value="#FF6F7074" />

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="{x:Type Button}">

        <Border x:Name="ButtonBorder" Background="{TemplateBinding Background}"

                Padding="30, 0, 0, 0">

          <ContentPresenter HorizontalAlignment="Left"

                            VerticalAlignment="Center" />

        </Border>

        <ControlTemplate.Triggers>

          <EventTrigger RoutedEvent="Click">

            <BeginStoryboard>

              <Storyboard>

                <ColorAnimation Storyboard.TargetName="ButtonBorder" 

                                Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"

                                Duration="0:0:0" 

                                To="Coral" />

                <ColorAnimation Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"

                                Storyboard.TargetProperty="Foreground.(SolidColorBrush.Color)"

                                Duration="0:0:0"

                                To="White" />

              </Storyboard>

            </BeginStoryboard>

          </EventTrigger>

        </ControlTemplate.Triggers>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

但如果您只想提供按钮单击反馈，您应该在该Button.IsPressed属性上触发：

<Style x:Key="MainMenuStyle"

       TargetType="{x:Type Button}">

  <Setter Property="Background"

          Value="#FF303136" />

  <Setter Property="Foreground"

          Value="#FF6F7074" />

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="{x:Type Button}">

        <Border x:Name="ButtonBorder" Background="{TemplateBinding Background}"

                Padding="30, 0, 0, 0">

          <ContentPresenter HorizontalAlignment="Left"

                            VerticalAlignment="Center" />

        </Border>

        <ControlTemplate.Triggers>                       

          <Trigger Property="IsPressed" Value="True">

            <Setter Property="Background"

                    Value="Coral" />

            <Setter Property="Foreground"

                    Value="White" />

          </Trigger>

        </ControlTemplate.Triggers>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

编辑

背景色之所以被设置回来，是因为触发器的原因IsMouseOver。您所描述的从Button.Click事件处理程序切换样式的解决方案并不干净，无法回答您的问题。

您希望Button单击（选择）时更改颜色，同时应用鼠标悬停效果。

因此我建议替换Button为ToggleButton. ToggleButton提供两种开箱即用的状态（选中和未选中）：

<Style x:Key="MainMenuStyle"

       TargetType="{x:Type ToggleButton}">

  <Setter Property="Background"

          Value="#FF303136" />

  <Setter Property="Foreground"

          Value="#FF6F7074" />

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="{x:Type ToggleButton}">

        <Border x:Name="ButtonBorder" Background="{TemplateBinding Background}"

                Padding="30, 0, 0, 0">

          <ContentPresenter HorizontalAlignment="Left"

                            VerticalAlignment="Center" />

        </Border>

        <ControlTemplate.Triggers>

          <Trigger Property="IsChecked" Value="True">

            <Setter Property="Background"

                    Value="Coral" />

            <Setter Property="Foreground"

                    Value="White" />    

          </Trigger>

          <Trigger Property="IsMouseOver" Value="True">

            <Setter Property="Background"

                    Value="#FF2A2A32" />

            <Setter Property="Foreground"

                    Value="#FFBBBCB8" />    

          </Trigger>

          <MultiTrigger>

            <MultiTrigger.Conditions>

              <Condition Property="IsChecked" Value="True" />

              <Condition Property="IsMouseOver" Value="True" />

            </MultiTrigger.Conditions>

            <Setter Property="Background"

                    Value="Coral" />

            <Setter Property="Foreground"

                    Value="#FFBBBCB8" />

          </MultiTrigger>

        </ControlTemplate.Triggers>

      </ControlTemplate>

    </Setter.Value>

  </Setter>    

</Style>