Windows/Avalonia/.NET环境下按钮Foreground颜色过渡失效求助

问题现象 #

使用最新版Windows、Avalonia和.NET环境，为Button.Card添加鼠标悬停时的Foreground颜色过渡效果，编写两段Style代码后，颜色可正常切换，但完全没有过渡动画，调整时长也无效。

原代码：

悬停状态样式 #

<Style Selector="Button.Card:pointerover /template/ ContentPresenter#PART_ContentPresenter">
  <Setter Property="Background" Value="#BB27292D" />
  <Setter Property="Foreground" Value="#FFFFFF" />
  <Setter Property="Transitions">
    <Transitions>
      <BrushTransition Property="Foreground" Duration="0:0:0.5" />
    </Transitions>
  </Setter>
</Style>

基础状态样式 #

<Style Selector="Button.Card">
  <Setter Property="Background" Value="#50252525" />
  <Setter Property="Foreground" Value="#33FFFFFF" />
  <Setter Property="Transitions">
    <Transitions>
      <BrushTransition Property="Foreground" Duration="0:0:0.5" />
    </Transitions>
  </Setter>
</Style>

问题原因 #

两段Style的目标元素不一致：一段针对按钮模板内的ContentPresenter，另一段针对按钮本身；且过渡效果被重复定义在不同状态的样式中，导致状态切换时过渡规则无法持续作用于目标元素。

解决方案 #

方案1：针对ContentPresenter统一设置过渡 #

将过渡效果定义在ContentPresenter的基础样式中，悬停状态仅修改属性值：

<!-- 基础样式：为ContentPresenter设置初始属性及过渡规则 -->
<Style Selector="Button.Card /template/ ContentPresenter#PART_ContentPresenter">
  <Setter Property="Background" Value="#50252525" />
  <Setter Property="Foreground" Value="#33FFFFFF" />
  <Setter Property="Transitions">
    <Transitions>
      <BrushTransition Property="Foreground" Duration="0:0:0.5" />
      <BrushTransition Property="Background" Duration="0:0:0.5" />
    </Transitions>
  </Setter>
</Style>

<!-- 悬停状态：仅修改属性，复用已定义的过渡规则 -->
<Style Selector="Button.Card:pointerover /template/ ContentPresenter#PART_ContentPresenter">
  <Setter Property="Background" Value="#BB27292D" />
  <Setter Property="Foreground" Value="#FFFFFF" />
</Style>

方案2：在Button级别设置过渡（推荐） #

直接在Button本身设置过渡规则，让ContentPresenter继承Foreground属性，简化代码：

<!-- 基础样式：为Button设置初始属性及过渡规则 -->
<Style Selector="Button.Card">
  <Setter Property="Background" Value="#50252525" />
  <Setter Property="Foreground" Value="#33FFFFFF" />
  <Setter Property="Transitions">
    <Transitions>
      <BrushTransition Property="Foreground" Duration="0:0:0.5" />
      <BrushTransition Property="Background" Duration="0:0:0.5" />
    </Transitions>
  </Setter>
</Style>

<!-- 悬停状态：仅修改Button的属性，过渡自动生效 -->
<Style Selector="Button.Card:pointerover">
  <Setter Property="Background" Value="#BB27292D" />
  <Setter Property="Foreground" Value="#FFFFFF" />
</Style>

说明 #

两种方案都能确保过渡规则持续作用于目标元素，状态切换时属性值的变化会触发已定义的过渡动画。如果需要更精细控制模板内元素的过渡，优先选择方案1；如果只需Button整体的状态过渡，方案2更简洁。

内容的提问来源于stack exchange，提问作者Geertie