avaloniaui

Colors change but without the transition

Latest versions on all (Windows, Avalonia, .NET)

I have a style and I wish to incorporate a transition for changing the foreground color when I hoover over my button.

I'm using :

<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>

And this code for the back transition :

<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>

In testing, the colors do change, but without the transition. Any ideas on how to get this working, or is it a bug ? I changed the duration (to 2 seconds), but no transitioning happens ...

Not much info in the documentation on that topic (at least not for brush or color transitions).

Solution

  • Add the transition rules directly to ContentPresenter not for the Button

    the following code does what you want and using Nested Styles to gather all the rules for Button.Card in single Style

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

  <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Background" Value="#BB27292D" />
    <Setter Property="Foreground" Value="#ffffff" />
  </Style>
</Style>