Implementing Composable Property/Events Selectors

[jmacato]

me, @wieslawsoltes and alot of folks are trying to use styles for scenarios that only triggers when a certain event is called. In this wasabi PR, @wieslawsoltes made alot of boilerplate just for this imho "basic" feature.

We probably need to implement this in our selectors so that people wont have to do this tedious stuff.

cc @AvaloniaUI/core

[maxkatz6]

For me it's hard to understand event-like selectors, it's not how they work in CSS.
Furthermore it's not clear how to detect if selector matches UI control, because we don't have state for events. If this selector should be triggered instead of matched, then should it change values forever, keeping all state-priority values, or override local value (how Behaviors SDK does)?

In @wieslawsoltes PR I see only one inconvenience - it needs to have AddClassAction class. In Avalonia applications manipulating with classes is quite common, so as for me it makes sense to include this action in the Behaviors SDK package.

Another question, why users need to include some another package for such basic functionality. It makes sense to have some Triggers support out of box, and there already were some discussions - #1362 #2427

[wieslawsoltes]

This is something that event selector would make possible:

<Style Selector="Button[Click].clickAnim PathIcon.anim1">
  <Style.Animations>
    <Animation Duration="0:0:1">
      <KeyFrame Cue="0%">
        <Setter Property="Opacity" Value="0.0" />
      </KeyFrame>
      <KeyFrame Cue="100%">
        <Setter Property="Opacity" Value="1.00" />
      </KeyFrame>
    </Animation>
  </Style.Animations>
</Style>

<Style Selector="Button[Click].clickAnim PathIcon.anim2">
  <Style.Animations>
    <Animation Delay="0:0:1" Duration="0:0:1">
      <KeyFrame Cue="0%">
        <Setter Property="Opacity" Value="1.0" />
      </KeyFrame>
      <KeyFrame Cue="100%">
        <Setter Property="Opacity" Value="0.00" />
      </KeyFrame>
    </Animation>
  </Style.Animations>
</Style>

<Button Classes="clickAnim" Content="Click Me">
  <Panel>
    <PathIcon Classes="anim1" Data="{StaticResource icon1}"/>
    <PathIcon Classes="anim1" Data="{StaticResource icon2}"/>
  </Panel>
</Button>

[wieslawsoltes]

Maybe more explicit syntax sugar can be used to differentiate between property and event trigger like:

<Style Selector="Button[@Click]">

[Gillibald]

It feels more natural to set a class name when some event is raised instead of working with events directly. The AddClassAction seems to be a good solution.

[wieslawsoltes]

It feels more natural to set a class name when some event is raised instead of working with events directly. The AddClassAction seems to be a good solution.

Yes I agree, this works fine, but that increases verbosity in Xaml, if you have to do it once, that is fine, but I need to do it across 10s of views. There is another way of improving things with animations by adding easy way to manipulate classes in xaml.