Xaml Triggers in Css

Supported versions: 2.0.0-pre1 or higher Supported platforms: WPF, Xamarin.Forms

What are Triggers?

Trigger is a Xaml concept. Triggers apply values or invoke actions depending on conditions. There are 3 types

• PropertyTrigger
• DataTrigger
• EventTrigger

PropertyTrigger

Property-triggers apply values if a dependency-property of a control matches a given value.

I.e. if you want to gray-out a button if it is not enabled, you can define a property-trigger as followed:

Button {
    @Property IsEnabled false {
        BackgroundColor: #dddddd;
    }
}

DataTrigger

Data-Triggers apply values if a value of a property on the binding-context (aka. data-context) matches a given value.

I.e. if you want to want to make the background of a Entry red if the validation fails, define a data-trigger as followed:

Entry {
    @Data IsValid false {
        BackgroundColor: Red;
    }
}

EventTrigger

Event-Triggers invoke trigger-actions if an event is raised.

In Xamarin.Forms, trigger-actions can be defined by subclassing TriggerAction<>.
In WPF only predefined trigger-actions are available, like BeginStoryboard.

Parameters are provided as a block and written like normal style-definition blocks. It follows the pattern <property-name>: <property-value>.

Button {
    @Event Clicked {
        ToColorTriggerAction: {
            To: Red;
            Duration 5000;
        }
    }
}

ToColorTriggerAction is a custom TriggerAction - see ToColorTriggerAction

Enter/Exit Actions

Property- and data-triggers support enter/exit actions.

Enter actions are executed if the condition on the trigger is first fulfilled. Exit actions on the other hand are executed if a previous matching condition is no longer true.

Let's take the previous data-trigger and write it with enter/exit actions:

Entry {
    @Data IsValid false {
        @Enter: {
            ToColorTriggerAction: {
                To: Red;
                Duration 1000;
            }
        }

        @Exit: {
            ToColorTriggerAction: {
                To: Green;
                Duration 1000;
            }
        }
    }
}

ToColorTriggerAction

Here the ToColorTriggerAction code used in this page:

public class ToColorTriggerAction : TriggerAction<VisualElement>
{
    public static Task<bool> ColorTo(VisualElement self, Color fromColor, Color toColor, Action<Color> callback, uint length = 250, Easing easing = null)
    {
        Func<double, Color> transform = (t) =>
            Color.FromRgba(fromColor.R + t * (toColor.R - fromColor.R),
                            fromColor.G + t * (toColor.G - fromColor.G),
                            fromColor.B + t * (toColor.B - fromColor.B),
                            fromColor.A + t * (toColor.A - fromColor.A));

        return ColorAnimation(self, "ToColorTriggerAction", transform, callback, length, easing);
    }

    static Task<bool> ColorAnimation(VisualElement element, string name, Func<double, Color> transform, Action<Color> callback, uint length, Easing easing)
    {
        easing = easing ?? Easing.Linear;
        var taskCompletionSource = new TaskCompletionSource<bool>();
        if (element.AnimationIsRunning("ToColorTriggerAction"))
        {
            element.AbortAnimation("ToColorTriggerAction");
        }
        element.Animate<Color>(name, transform, callback, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));

        return taskCompletionSource.Task;
    }

    public Color To { get; set; }
    public uint Duration { get; set; }

    protected override void Invoke(VisualElement entry)
    {
        ColorTo(entry, entry.BackgroundColor, To, c => entry.BackgroundColor = c, Duration, Easing.Linear);
    }
}