如何实现Xamarin.Forms按钮点击时短暂切换背景色后恢复？

这个需求其实挺常见的——给按钮加个即时的点击反馈动画，等动画结束后再跑实际的业务逻辑，你用BaseButton封装的思路完全正确。核心是要异步处理颜色切换，不能阻塞UI线程，不然用户会觉得界面卡顿。下面是完整的可落地实现：

1. 完整的BaseButton实现 #

我们会把颜色切换、等待恢复、执行逻辑的流程封装在BaseButton里，同时支持绑定Command和自定义事件两种方式，兼容你平时的使用习惯：

using Xamarin.Forms;

public class BaseButton : Button
{
    // 可绑定属性：让你能在XAML里自定义点击时的临时颜色
    public static readonly BindableProperty PressedBackgroundColorProperty =
        BindableProperty.Create(nameof(PressedBackgroundColor), typeof(Color), typeof(BaseButton), Color.Red);

    // 可绑定属性：自定义动画持续时间（毫秒）
    public static readonly BindableProperty AnimationDurationProperty =
        BindableProperty.Create(nameof(AnimationDuration), typeof(int), typeof(BaseButton), 200);

    // 自定义事件：动画结束后触发，供你写业务逻辑
    public event EventHandler AnimationCompletedClicked;

    public Color PressedBackgroundColor
    {
        get => (Color)GetValue(PressedBackgroundColorProperty);
        set => SetValue(PressedBackgroundColorProperty, value);
    }

    public int AnimationDuration
    {
        get => (int)GetValue(AnimationDurationProperty);
        set => SetValue(AnimationDurationProperty, value);
    }

    public BaseButton()
    {
        // 拦截原生的Clicked事件
        Clicked += OnBaseButtonClicked;
    }

    private async void OnBaseButtonClicked(object sender, EventArgs e)
    {
        // 阻止原生事件继续传递，避免逻辑提前执行
        e.Handled = true;

        // 记录当前的原始背景色（支持动态变化的场景）
        var originalColor = BackgroundColor;

        try
        {
            // 切换到临时点击色
            BackgroundColor = PressedBackgroundColor;

            // 异步等待动画时长，不会卡住UI
            await Task.Delay(AnimationDuration);
        }
        finally
        {
            // 不管发生什么，都要恢复原始颜色
            BackgroundColor = originalColor;
        }

        // 执行后续逻辑：先触发自定义事件，再执行绑定的Command
        AnimationCompletedClicked?.Invoke(this, EventArgs.Empty);
        if (Command != null && Command.CanExecute(CommandParameter))
        {
            Command.Execute(CommandParameter);
        }
    }
}

2. 使用方式 #

方式一：绑定Command（MVVM场景） #

在XAML里直接使用BaseButton，绑定你的业务Command即可：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <local:BaseButton Text="测试按钮" 
                      BackgroundColor="Blue"
                      PressedBackgroundColor="Red"
                      AnimationDuration="200"
                      Command="{Binding DoSomethingCommand}" />

</ContentPage>

方式二：订阅自定义事件（代码后台场景） #

如果是在代码后台写逻辑，订阅AnimationCompletedClicked事件即可：

<local:BaseButton x:Name="MyButton" 
                  Text="测试按钮" 
                  BackgroundColor="Blue"
                  PressedBackgroundColor="Red" />

后台代码：

public MainPage()
{
    InitializeComponent();
    MyButton.AnimationCompletedClicked += MyButton_AnimationCompletedClicked;
}

private void MyButton_AnimationCompletedClicked(object sender, EventArgs e)
{
    // 这里写你的实际业务逻辑，比如弹窗、导航等
    DisplayAlert("提示", "按钮点击动画完成，开始执行逻辑", "确定");
}

3. 关键细节说明 #

• 异步等待：用Task.Delay而不是Thread.Sleep，因为后者会阻塞UI线程，导致界面假死。
• finally块恢复颜色：确保即使中途出现异常，按钮也能恢复原始颜色，避免UI状态异常。
• 可绑定属性：把临时颜色和动画时长做成可绑定属性，让你能在XAML里灵活配置，不用改代码。
• 兼容原有逻辑：同时支持Command和自定义事件，不管你是用MVVM还是传统代码后台，都能无缝接入。

这样实现后，用户点击按钮时会先看到蓝色变红色，保持200ms后变回蓝色，紧接着才会执行你写的业务逻辑，完全符合你的需求。

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