Hour 11 – MAUI Animations, Triggers, Behaviors & Effects

📘 Hour 11 – Animations, Triggers, Behaviors & Effects

Welcome to Hour 11 of your MAUI MVVM learning series. Today we explore four powerful UI enhancement tools in .NET MAUI:

• ➡ Animations
• ➡ Triggers
• ➡ Behaviors
• ➡ Effects

---

✨ 1. MAUI Animations

MAUI supports built‑in animations for transforming UI elements with smooth visual effects.

🔄 1.1 Fade Animation

await myLabel.FadeTo(0, 500);
await myLabel.FadeTo(1, 500);

✔ Creates a fade-out and fade-in effect.

🔍 1.2 Scale Animation

await myButton.ScaleTo(1.2, 300);
await myButton.ScaleTo(1.0, 300);

✔ Useful for "press" or "pop" effects.

🔁 1.3 Translate Animation

await myImage.TranslateTo(50, 0, 400);

✔ Moves element smoothly across the screen.

🌀 1.4 Rotation

await myIcon.RotateTo(360, 700);

✔ Full circle rotation.

---

✨ 2. Triggers in MAUI

Triggers change UI properties automatically when a condition is met.

🎛 2.1 Property Trigger

<Entry>
    <Entry.Triggers>
        <Trigger TargetType="Entry" Property="IsFocused" Value="True">
            <Setter Property="BackgroundColor" Value="LightYellow" />
        </Trigger>
    </Entry.Triggers>
</Entry>

✔ Changes background when entry is focused.

📘 2.2 Data Trigger

<Label Text="{Binding Status}">
    <Label.Triggers>
        <DataTrigger TargetType="Label"
                     Binding="{Binding IsError}"
                     Value="True">
            <Setter Property="TextColor" Value="Red" />
        </DataTrigger>
    </Label.Triggers>
</Label>

✔ Data-binding based UI reaction.

---

✨ 3. Behaviors in MAUI

Behaviors let you attach reusable logic to any control without subclassing.

🧩 3.1 Example: Text Only Numeric Behavior

public class NumericEntryBehavior : Behavior<Entry>
{
    protected override void OnAttachedTo(Entry entry)
    {
        entry.TextChanged += Entry_TextChanged;
        base.OnAttachedTo(entry);
    }

    private void Entry_TextChanged(object sender, TextChangedEventArgs e)
    {
        if (!int.TryParse(e.NewTextValue, out _))
            ((Entry)sender).Text = e.OldTextValue;
    }
}

🧪 3.2 Attach Behavior in XAML

<Entry Placeholder="Enter number only">
    <Entry.Behaviors>
        <local:NumericEntryBehavior />
    </Entry.Behaviors>
</Entry>

✔ Prevents non-numeric input globally.

---

✨ 4. Effects in MAUI

Effects add platform‑specific enhancements without writing a full handler or renderer.

💡 4.1 Create Routing Effect

public class FocusEffect : RoutingEffect
{
    public FocusEffect() : base("MyApp.FocusEffect")
    {
    }
}

⬇ 4.2 Platform Implementation (Android)

// Platforms/Android/Effects/FocusEffect.cs
[assembly: ResolutionGroupName("MyApp")]
[assembly: ExportEffect(typeof(FocusEffectDroid), "FocusEffect")]

public class FocusEffectDroid : PlatformEffect
{
    protected override void OnAttached()
    {
        Control.SetBackgroundColor(Android.Graphics.Color.LightGreen);
    }

    protected override void OnDetached()
    {
        Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
    }
}

⚙ 4.3 Use Effect in XAML

<Entry Text="Focus me">
    <Entry.Effects>
        <local:FocusEffect />
    </Entry.Effects>
</Entry>

✔ Entry background changes only on Android (platform-specific).

---

✨ 5. Combined Example – Animated Button With Behavior and Trigger

📄 5.1 Behavior: Grow Button When Pressed

public class GrowOnPressBehavior : Behavior<Button>
{
    protected override void OnAttachedTo(Button button)
    {
        button.Pressed += async (s, e) =>
        {
            await button.ScaleTo(1.2, 150);
        };

        button.Released += async (s, e) =>
        {
            await button.ScaleTo(1.0, 150);
        };
    }
}

📄 5.2 XAML Usage

<Button Text="Tap Me">
    <Button.Behaviors>
        <local:GrowOnPressBehavior />
    </Button.Behaviors>

    <Button.Triggers>
        <Trigger TargetType="Button" Property="IsEnabled" Value="False">
            <Setter Property="Opacity" Value="0.5" />
        </Trigger>
    </Button.Triggers>
</Button>

✔ Smooth animations ✔ Visual feedback ✔ Declarative UI behavior ✔ Highly reusable

---

📘 Hour 11 Summary

• ✔ Animations enhance user experience with movement & transitions
• ✔ Triggers react to property or data changes automatically
• ✔ Behaviors add reusable logic to any control
• ✔ Effects provide light platform-specific enhancements
• ✔ Together, they create rich, polished MAUI UI