.NET MAUI中如何通过触发器同时实现多控件动画

方案一：为目标控件单独绑定DataTrigger（最符合MVVM规范） #

既然已经有ViewModel中的ShowOptions属性作为触发源，最直接且符合MVVM解耦要求的方式，就是给需要动画的每个控件都添加对应的DataTrigger，绑定同一个属性。所有控件的动画都由ViewModel的状态驱动，逻辑清晰且无耦合。

修改View代码，给AnotherButton添加相同逻辑的触发器：

<ContentPage xmlns:triggers="clr-namespace:MauiApp1.Triggers">

    ...

    <Button Text="Click this button"
            Command="{Binding ShowOptionsCommand}"
            Opacity="1">
        <Button.Triggers>
            <DataTrigger Binding="{Binding ShowOptions}" 
                         TargetType="Button" 
                         Value="true">
                <DataTrigger.EnterActions>
                    <triggers:ShowOptionsTrigger ShowOptions="True"/>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <triggers:ShowOptionsTrigger ShowOptions="False"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Button.Triggers>
    </Button>

    <Button Text="Another button"
            x:Name="AnotherButton"
            Opacity="1">
        <Button.Triggers>
            <DataTrigger Binding="{Binding ShowOptions}" 
                         TargetType="Button" 
                         Value="true">
                <DataTrigger.EnterActions>
                    <triggers:ShowOptionsTrigger ShowOptions="True"/>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <triggers:ShowOptionsTrigger ShowOptions="False"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Button.Triggers>
    </Button>

    ...

</ContentPage>

Trigger代码无需修改，每个控件的Trigger会自动处理自身的动画。

方案二：在Trigger中通过视觉树查找目标控件（耦合性高，非MVVM推荐） #

如果不想给每个控件都加Trigger，可以在Trigger的Invoke方法中，通过VisualTreeHelper向上找到页面，再查找指定名称的控件。这种方式能实现需求，但会让Trigger和控件的x:Name硬耦合，不利于后期维护，仅适合临时场景。

修改Trigger代码：

namespace MauiApp1.Triggers;

public class ShowOptionsTrigger : TriggerAction<VisualElement>
{
    public bool ShowOptions { get; set; }

    protected override async void Invoke(VisualElement sender)
    {
        // 处理当前控件动画
        if (ShowOptions)
            await sender.FadeTo(0.0, 250);
        else
            await sender.FadeTo(1.0, 250);

        // 查找AnotherButton
        var page = FindParent<ContentPage>(sender);
        if (page != null)
        {
            var anotherButton = page.FindByName<Button>("AnotherButton");
            if (anotherButton != null)
            {
                if (ShowOptions)
                    await anotherButton.FadeTo(0.0, 250);
                else
                    await anotherButton.FadeTo(1.0, 250);
            }
        }
    }

    // 递归查找父级控件
    private T FindParent<T>(Element element) where T : Element
    {
        if (element.Parent is T parent)
            return parent;
        return element.Parent != null ? FindParent<T>(element.Parent) : null;
    }
}

此方案无需修改View代码，但控件名称变更或移除时会直接报错，不符合MVVM解耦思想。

方案三：使用附加属性统一管理动画（灵活度高） #

可以创建一个附加属性，绑定ShowOptions属性，当属性变化时统一处理多个控件的动画。这种方式既保持解耦，又能集中管理动画逻辑。

首先创建附加属性类：

namespace MauiApp1.Triggers;

public static class AnimationHelper
{
    public static readonly BindableProperty AnimateOnShowOptionsProperty =
        BindableProperty.CreateAttached(
            "AnimateOnShowOptions",
            typeof(bool),
            typeof(AnimationHelper),
            false,
            propertyChanged: OnAnimateOnShowOptionsChanged);

    public static bool GetAnimateOnShowOptions(BindableObject view)
    {
        return (bool)view.GetValue(AnimateOnShowOptionsProperty);
    }

    public static void SetAnimateOnShowOptions(BindableObject view, bool value)
    {
        view.SetValue(AnimateOnShowOptionsProperty, value);
    }

    private static async void OnAnimateOnShowOptionsChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is VisualElement element && newValue is bool showOptions)
        {
            if (showOptions)
                await element.FadeTo(0.0, 250);
            else
                await element.FadeTo(1.0, 250);
        }
    }
}

然后在View中给需要动画的控件附加这个属性，绑定ShowOptions：

<ContentPage xmlns:triggers="clr-namespace:MauiApp1.Triggers">

    ...

    <Button Text="Click this button"
            Command="{Binding ShowOptionsCommand}"
            Opacity="1"
            triggers:AnimationHelper.AnimateOnShowOptions="{Binding ShowOptions}"/>

    <Button Text="Another button"
            x:Name="AnotherButton"
            Opacity="1"
            triggers:AnimationHelper.AnimateOnShowOptions="{Binding ShowOptions}"/>

    ...

</ContentPage>

这种方式无需使用Trigger，所有需要动画的控件只需添加附加属性即可，逻辑集中且解耦，是推荐的进阶方案。

内容的提问来源于stack exchange，提问作者user7862339