MAUI自定义滑动控件扩展需求：支持左右滑动等功能

基于已有的滑动按钮实现，以下是三个扩展功能的具体实现步骤：

1. 支持双向滑动（左→右/右→左） #

首先定义滑动方向枚举，标记控件的滑动模式：

public enum SwipeDirection
{
    LeftToRight,
    RightToLeft
}

在自定义滑动按钮控件中添加绑定属性，允许外部设置滑动方向：

public static readonly BindableProperty SwipeDirectionProperty =
    BindableProperty.Create(nameof(SwipeDirection), typeof(SwipeDirection), typeof(SwipeButton), SwipeDirection.LeftToRight);

public SwipeDirection SwipeDirection
{
    get => (SwipeDirection)GetValue(SwipeDirectionProperty);
    set => SetValue(SwipeDirectionProperty, value);
}

调整初始化和滑动逻辑适配不同方向：

• 初始化时根据方向设置滑块初始位置：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    if (width <= 0 || height <= 0) return;

    var maxTranslate = width - SliderButton.Width;
    SliderButton.TranslationX = SwipeDirection == SwipeDirection.RightToLeft 
        ? maxTranslate 
        : 0;
}

• 处理手势时反转平移值，适配右→左滑动：

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    switch (e.StatusType)
    {
        case GestureStatus.Running:
            var rawTranslation = SwipeDirection == SwipeDirection.RightToLeft 
                ? -e.TotalX 
                : e.TotalX;
            // 后续滑动逻辑基于rawTranslation处理
            break;
        // 其他状态处理
    }
}

2. 滑动过程中背景色动态过渡 #

添加起始和目标背景色的绑定属性，支持外部自定义颜色：

public static readonly BindableProperty StartBackgroundColorProperty =
    BindableProperty.Create(nameof(StartBackgroundColor), typeof(Color), typeof(SwipeButton), Colors.LightGray);

public Color StartBackgroundColor
{
    get => (Color)GetValue(StartBackgroundColorProperty);
    set => SetValue(StartBackgroundColorProperty, value);
}

public static readonly BindableProperty EndBackgroundColorProperty =
    BindableProperty.Create(nameof(EndBackgroundColor), typeof(Color), typeof(SwipeButton), Colors.Green);

public Color EndBackgroundColor
{
    get => (Color)GetValue(EndBackgroundColorProperty);
    set => SetValue(EndBackgroundColorProperty, value);
}

实现颜色插值方法，根据滑动进度计算当前背景色：

private void UpdateBackground(double progress)
{
    var currentR = StartBackgroundColor.Red + (EndBackgroundColor.Red - StartBackgroundColor.Red) * progress;
    var currentG = StartBackgroundColor.Green + (EndBackgroundColor.Green - StartBackgroundColor.Green) * progress;
    var currentB = StartBackgroundColor.Blue + (EndBackgroundColor.Blue - StartBackgroundColor.Blue) * progress;
    var currentA = StartBackgroundColor.Alpha + (EndBackgroundColor.Alpha - StartBackgroundColor.Alpha) * progress;

    BackgroundColor = Color.FromRgba(currentR, currentG, currentB, currentA);
}

在滑动过程中计算进度并更新背景：

case GestureStatus.Running:
    var maxTranslate = Width - SliderButton.Width;
    var clampedTranslation = Math.Clamp(rawTranslation, 0, maxTranslate);
    var swipeProgress = clampedTranslation / maxTranslate;
    UpdateBackground(swipeProgress);
    SliderButton.TranslationX = clampedTranslation;
    break;

3. 滑动至末端时固定滑块位置 #

调整手势结束时的逻辑，判断滑动是否到达有效末端，固定滑块位置：

case GestureStatus.Completed:
    var maxTranslate = Width - SliderButton.Width;
    var finalTranslation = Math.Clamp(rawTranslation, 0, maxTranslate);
    var completionProgress = finalTranslation / maxTranslate;

    // 设定90%阈值判定为滑动完成
    if (completionProgress >= 0.9)
    {
        // 平滑移动到末端并固定
        SliderButton.TranslateTo(maxTranslate, 0, 100);
        // 触发滑动完成事件（根据原有实现补充）
        OnSwipeCompleted();
    }
    else
    {
        // 回弹到初始位置
        var initialPos = SwipeDirection == SwipeDirection.RightToLeft ? maxTranslate : 0;
        SliderButton.TranslateTo(initialPos, 0, 100);
    }
    // 重置背景色
    BackgroundColor = StartBackgroundColor;
    break;

同时在滑动过程中限制滑块范围，避免超出控件边界：

case GestureStatus.Running:
    var maxTranslate = Width - SliderButton.Width;
    var clampedTranslation = Math.Clamp(rawTranslation, 0, maxTranslate);
    SliderButton.TranslationX = clampedTranslation;
    // 其他逻辑...
    break;

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