如何在MAUI应用中实现带事件响应的滑动按钮？

以下是实现支持滑动至末端、可自定义图标/图片且带事件响应的滑动按钮的完整方案：

1. 创建自定义滑动按钮控件 #

控件XAML（SwipeToConfirmButton.xaml） #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.SwipeToConfirmButton">
    <ContentView.Content>
        <Frame CornerRadius="8" BackgroundColor="#F0F0F0" Padding="0">
            <Grid x:Name="SwipeGrid" HeightRequest="60">
                <!-- 背景提示文本 -->
                <Label Text="滑动以确认" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#666"/>
                <!-- 滑动块 -->
                <Frame x:Name="SwipeThumb" CornerRadius="8" BackgroundColor="#FFF" WidthRequest="60"
                       HorizontalOptions="Start" VerticalOptions="Fill" Margin="2">
                    <Image x:Name="ThumbIcon" HorizontalOptions="Center" VerticalOptions="Center"/>
                </Frame>
            </Grid>
        </Frame>
    </ContentView.Content>
</ContentView>

控件后台代码（SwipeToConfirmButton.xaml.cs） #

using Microsoft.Maui.Controls;
using System.Windows.Input;

namespace YourAppNamespace;

public partial class SwipeToConfirmButton : ContentView
{
    // 滑动完成事件
    public event EventHandler SwipeCompleted;

    // 绑定命令属性
    public static readonly BindableProperty SwipeCompletedCommandProperty =
        BindableProperty.Create(nameof(SwipeCompletedCommand), typeof(ICommand), typeof(SwipeToConfirmButton));

    public ICommand SwipeCompletedCommand
    {
        get => (ICommand)GetValue(SwipeCompletedCommandProperty);
        set => SetValue(SwipeCompletedCommandProperty, value);
    }

    // 自定义图标源属性
    public static readonly BindableProperty ThumbIconSourceProperty =
        BindableProperty.Create(nameof(ThumbIconSource), typeof(ImageSource), typeof(SwipeToConfirmButton), ImageSource.FromFile("arrow_right.png"));

    public ImageSource ThumbIconSource
    {
        get => (ImageSource)GetValue(ThumbIconSourceProperty);
        set => SetValue(ThumbIconSourceProperty, value);
    }

    private double _maxTranslateX;
    private bool _isSwiped;

    public SwipeToConfirmButton()
    {
        InitializeComponent();
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        SwipeThumb.GestureRecognizers.Add(panGesture);
        // 绑定图标源
        ThumbIcon.SetBinding(Image.SourceProperty, new Binding(nameof(ThumbIconSource), source: this));
    }

    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);
        // 计算滑块最大移动距离
        _maxTranslateX = SwipeGrid.Width - SwipeThumb.Width;
    }

    private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        if (_isSwiped) return;

        switch (e.StatusType)
        {
            case GestureStatus.Running:
                // 限制滑块在容器范围内移动
                var translateX = Math.Clamp(e.TotalX, 0, _maxTranslateX);
                SwipeThumb.TranslationX = translateX;
                break;
            case GestureStatus.Completed:
                // 判断是否滑到末端（允许5px误差）
                if (Math.Abs(SwipeThumb.TranslationX - _maxTranslateX) < 5)
                {
                    _isSwiped = true;
                    // 触发事件和命令
                    SwipeCompleted?.Invoke(this, EventArgs.Empty);
                    SwipeCompletedCommand?.Execute(null);
                    // 完成视觉反馈
                    SwipeThumb.BackgroundColor = Colors.Green;
                    ThumbIcon.Source = "check.png";
                }
                else
                {
                    // 未滑到末端，滑块回弹
                    SwipeThumb.TranslateTo(0, 0, 200);
                }
                break;
        }
    }

    // 重置滑块状态
    public void ResetSwipeState()
    {
        _isSwiped = false;
        SwipeThumb.TranslationX = 0;
        SwipeThumb.BackgroundColor = Colors.White;
        ThumbIcon.Source = ThumbIconSource;
    }
}

2. 在页面中使用控件 #

XAML布局 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <VerticalStackLayout Padding="20" Spacing="30">
        <!-- 直接绑定事件 -->
        <local:SwipeToConfirmButton x:Name="SwipeValidator" 
                                    ThumbIconSource="custom_arrow.png"
                                    SwipeCompleted="SwipeValidator_OnSwipeCompleted"/>

        <!-- 使用MVVM命令绑定 -->
        <local:SwipeToConfirmButton SwipeCompletedCommand="{Binding OnSwipeConfirmCommand}"
                                    ThumbIconSource="hand_swipe.png"/>
    </VerticalStackLayout>
</ContentPage>

页面后台事件处理 #

private void SwipeValidator_OnSwipeCompleted(object sender, EventArgs e)
{
    // 滑动完成后的业务逻辑，比如提交表单、解锁功能
    DisplayAlert("验证成功", "已完成滑动验证", "确定");
}

3. 扩展说明 #

• 自定义图标：通过ThumbIconSource属性可以设置任意图片/图标，确保图片资源放在Resources/Images目录，并在项目文件中标记为MauiImage。
• 双向滑动支持：若需要支持左右双向滑动，可修改OnPanUpdated方法，判断滑动方向并设置对应的正负最大移动距离。
• 样式自定义：可调整Frame的CornerRadius、BackgroundColor，Label的提示文本等，适配应用整体风格。

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