如何在Styles Resources中添加Behaviors以复用按钮点击动画？

问题背景 #

我有一个按钮点击触发的动画，希望无需为每个按钮重复编写代码即可复用该动画。现有实现代码如下：

<Button StyleClass="btn,btn-primary">
    <Button.Behaviors>
        <mct:AnimationBehavior EventName="Clicked">
            <mct:AnimationBehavior.AnimationType >
                <behaviorPages:ScaleAnimation 
                    Easing="{x:Static Easing.Linear}"
                    Length="100"/>
            </mct:AnimationBehavior.AnimationType>
        </mct:AnimationBehavior>
    </Button.Behaviors>
</Button>

我尝试用x:Key将其添加到资源中，但写法有误：

<Button.Behaviors x:Key="animationClick">
    <mct:AnimationBehavior EventName="Clicked">
        <mct:AnimationBehavior.AnimationType >
            <behaviorPages:ScaleAnimation 
                        Easing="{x:Static Easing.Linear}"
                        Length="100"/>
        </mct:AnimationBehavior.AnimationType>
    </mct:AnimationBehavior>
</Button.Behaviors>

正确实现方案 #

错误原因

直接给<Button.Behaviors>集合添加x:Key是无效的，Button.Behaviors是控件的集合属性，不能作为独立的资源项。正确的做法是将AnimationBehavior本身作为资源，或者在按钮样式中内置行为。

方案一：将AnimationBehavior作为可复用资源

1. 在资源字典（如App.xaml或页面的Resources节点）中定义Behavior资源：

<mct:AnimationBehavior x:Key="ClickScaleAnimation" EventName="Clicked">
    <mct:AnimationBehavior.AnimationType>
        <behaviorPages:ScaleAnimation 
            Easing="{x:Static Easing.Linear}"
            Length="100"/>
    </mct:AnimationBehavior.AnimationType>
</mct:AnimationBehavior>

2. 在任意按钮中引用该资源：

<Button StyleClass="btn,btn-primary">
    <Button.Behaviors>
        <StaticResource Key="ClickScaleAnimation"/>
    </Button.Behaviors>
</Button>

方案二：在按钮样式中内置行为（自动应用）

如果希望所有使用特定样式的按钮自动拥有该动画，可以直接在Style中定义Behaviors属性：

<Style x:Key="AnimatedPrimaryButtonStyle" TargetType="Button" BasedOn="{StaticResource btn}">
    <Setter Property="StyleClass" Value="btn-primary"/>
    <Setter Property="Behaviors">
        <Setter.Value>
            <mct:AnimationBehavior EventName="Clicked">
                <mct:AnimationBehavior.AnimationType>
                    <behaviorPages:ScaleAnimation 
                        Easing="{x:Static Easing.Linear}"
                        Length="100"/>
                </mct:AnimationBehavior.AnimationType>
            </mct:AnimationBehavior>
        </Setter.Value>
    </Setter>
</Style>

使用时直接引用样式即可：

<Button Style="{StaticResource AnimatedPrimaryButtonStyle}"/>

注意事项 #

• 确保已正确导入Maui Community Toolkit（mct命名空间）和自定义ScaleAnimation的behaviorPages命名空间
• 资源作用域：App.xaml中的资源全局可用，页面内的资源仅当前页面生效

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