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

我试图制作像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>



繁星点点滴滴
浏览 56回答 1
1回答

慕的地8271018

依赖属性概述:绑定被视为本地值,这意味着如果您设置另一个本地值,您将消除绑定。有关详细信息,请参阅依赖属性值优先级。如果您对该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>
打开App,查看更多内容
随时随地看视频慕课网APP