Feature request: Trigger support

If I understand correctly, there are no Triggers in Avalonia right now. I think it would be beneficial to support them since they allow for dynamic UI that’s dependant on a model or another control’s state.

Here are few examples of how I use Triggers in my projects. The syntax is Ammy, but I think it’s understandable enough.

alias TopBarButton(buttonName) {
    Button {
        Style: Style {
            TargetType: Button
            Triggers: [
              @DataTrigger_SetProperty(bind "SelectedView", $buttonName, "BorderThickness", "1")
            ]
        }
    }
}

This trigger watches SelectedView property on a ViewModel and when it equals $buttonName (passed parameter), it would set BorderThickness to 1.

Or even something like this, which changes the Buttons content depending on IsCollapsed property:

Style: Style {
    TargetType: Button
    #Setter("Content", "▲")
    #Add_DataTrigger_SetProperty(bind IsCollapsed, true, "Content", "▼")
}

In some cases, you can replace triggers with Binding Converters, but it is more cumbersome, and not always possible (for example if you set the ControlTemplate).

[Symbai]

I’ve tried @grokys solution in Avalonia 0.9.3 and it doesn’t work:

<Style Selector="Button">
  <Setter Property="Background" Value="{Binding if VMProperty == true then 'Pink' else 'Black'}"/>
</Style>

throws Error Unexpected token EqualSign (line 20 position 33) Line 20, position 33. And

<Style Selector="Button">
  <Setter Property="Background" Value="{Binding if VMProperty then 'Pink' else 'Black'}"/>
</Style>

throws Quote characters out of place (line 20 position 33) Line 20, position 33.

I’ve taken a look at the Avalonia homepage about bindings and styling https://avaloniaui.net/docs/styles/ but something like this isn’t mentione there.

How can I achieve / convert a WPF application code where I change the background of a button via datacontext binding (without converter):

<Button>
 <Button.Style>
  <Style TargetType="{x:Type Button}" BasedOn="{x:type Button}>
      <Style.Triggers>
          <DataTrigger Binding="{Binding VMProperty}" Value="true">
              <Setter Property="Background" Value="Red"/>
          </DataTrigger>
      </Style.Triggers>
  </Style>
</Button.Style>
</Button>

[grokys]

@Xarlot please note that we’ve not made a decision to not include triggers, we’re just exploring alternatives.

I’ve taken a look at your examples and a lot of that can already be done in Avalonia even without conditional bindings. You just need to take advantage of our styling system. However I’ll add in conditional bindings using the invented syntax above for the stuff that can’t currently be done:

WPF:

<Style x:Key="baseStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Red"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
        <DataTrigger Binding="{Binding Path=(test:Attached.Property).IsEnabled, RelativeSource={RelativeSource Self}}" Value="true">
            <Setter Property="Background" Value="Yellow"></Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

Avalonia:

<Style Selector="Button">
    <Setter Property="Background" Value="{Binding if $self.(test:Attached.Property).IsEnabled then 'Yellow' else 'Red'}"/>
</Style>

<Style Selector="Button:pointerover">
    <Setter Property="Background" Value="Green"/>
</Style>

WPF:

<Style x:Key="derivedStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource baseStyle}">
    <Setter Property="Background" Value="Black"></Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=VMProperty}" Value="123">
            <Setter Property="Background" Value="Pink"></Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

Avalonia:

<Style Selector="Button">
    <Setter Property="Background" Value="{Binding if VMProperty == 123 then 'Pink' else 'Black'}"/>
</Style>

WPF:

<Style x:Key="{dxt:DefaultStyleThemeKey FullName=System.Windows.Controls.Button, ThemeName=DeepBlue}" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="Padding" Value="10,1,10,1"/>
    <Setter Property="Template" Value="{DynamicResource {dxt:ButtonThemeKey ResourceKey=ButtonControlTemplate, ThemeName=DeepBlue}}"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=Foreground, ThemeName=DeepBlue}}"/>
    <Style.Triggers>
        <Trigger Property="dx:ThemeManager.IsTouchEnabled" Value="True">
            <Setter Property="Padding" Value="25,11,25,11"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True"/>
                <Condition Property="ToggleButton.IsChecked" Value="False"/>
                <Condition Property="IsPressed" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=MouseOverForeground, ThemeName=DeepBlue}}"/>
        </MultiTrigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=CheckedForeground, ThemeName=DeepBlue}}"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=PressedForeground, ThemeName=DeepBlue}}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Avalonia:

<Style Selector="Button">
    <Setter Property="Padding" Value="10,1,10,1"/>
</Style>

<Style Selector="Button[dx:ThemeManager.IsTouchEnabled]">
    <Setter Property="Padding" Value="25,11,25,11"/>
</Style>

<Style Selector=":is(Button):pointerover:checked:pressed">
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=MouseOverForeground, ThemeName=DeepBlue}}"/>

<Style Selector=":is(Button):checked">
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=CheckedForeground, ThemeName=DeepBlue}}"/>
</Style>

<Style Selector="Button:pressed">
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey={dxt:DropDownButtonThemeKey ResourceKey=PressedForeground, ThemeName=DeepBlue}}"/>
</Style>