Формы Xamarin: как добавить SwipeGestureRecognizer для StackLayout?

У меня на домашней странице 15 вариантов. Сначала я покажу 9 вариантов в пользовательском интерфейсе. Чтобы просмотреть оставшиеся 6 значков, пользователь перемещается вправо и обратно влево, чтобы увидеть предыдущие. Я пытаюсь реализовать функцию прокрутки, как показано ниже, но она не работает.

XAML

<StackLayout x:Name="firstLlayout">
    <Grid>
        //3 icons in horizontal
    </Grid>

    <Grid>
        //3 icons in horizontal
    </Grid>

    <Grid>
        //3 icons in horizontal
    </Grid>
    <StackLayout.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Right" Swiped="RightSwipe"/>
    </StackLayout.GestureRecognizers>
</StackLayout>

<StackLayout IsVisible="False" x:Name="secondLayout">
     <Grid>
        //3 icons in horizontal
    </Grid>

    <Grid>
        //3 icons in horizontal
    </Grid>
    <StackLayout.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="LeftSwipe"/>
    </StackLayout.GestureRecognizers>
</StackLayout>

XAML.CS

public void RightSwipe(object sender, EventArgs e)
{
    firstLlayout.IsVisible = false;
    secondLayout.IsVisible = true;
}

public void LeftSwipe(object sender, EventArgs e)
{
    secondLayout.IsVisible = false;
    firstLlayout.IsVisible = true;
}

При попытке провести пальцем влево и вправо в пользовательском интерфейсе ничего не происходит, и выполнение кода не доходит до функций событий. Что мне здесь не хватает?


person Sreejith Sree    schedule 05.12.2019    source источник


Ответы (1)


Причина 1:

Действие смахивания будет конфликтовать с действием прокрутки, если вы поместите стек в ScrollView.

Решение:

Удалите ScrollView из Root StackLayout, тогда смахивание будет работать.

Причина 2: необходимо добавить дочерний элемент управления (например, Image или Label) в StackLayout, иначе действие смахивания не будет вызвано.

Решение. Если вы действительно хотите, чтобы содержимое StackLayout не отображалось по умолчанию, вы можете проверить следующий код.

в коде позади

using System;
using Xamarin.Forms;

namespace xxx
{
    public class GestureScrollView : ScrollView
    {
        public event EventHandler SwipeLeft;
        public event EventHandler SwipeRight;

        public void OnSwipeLeft() =>
            SwipeLeft?.Invoke(this, null);

        public void OnSwipeRight() =>
            SwipeRight?.Invoke(this, null);
    }
}

в Android Project

using System;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using xxx;
using xxx.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(GestureScrollView), typeof(GestureScrollViewRenderer))]
namespace xxx.Droid
{
    public class GestureScrollViewRenderer : ScrollViewRenderer
    {
        readonly CustomGestureListener _listener;
        readonly GestureDetector _detector;

        public GestureScrollViewRenderer(Context context) : base(context)
        {
            _listener = new CustomGestureListener();
            _detector = new GestureDetector(context, _listener);
        }

        public override bool DispatchTouchEvent(MotionEvent e)
        {
            if (_detector != null)
            {
                _detector.OnTouchEvent(e);
                base.DispatchTouchEvent(e);
                return true;
            }

            return base.DispatchTouchEvent(e);
        }

        public override bool OnTouchEvent(MotionEvent ev)
        {
            base.OnTouchEvent(ev);

            if (_detector != null)
                return _detector.OnTouchEvent(ev);

            return false;
        }

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement == null)
            {
                _listener.OnSwipeLeft -= HandleOnSwipeLeft;
                _listener.OnSwipeRight -= HandleOnSwipeRight;
            }

            if (e.OldElement == null)
            {
                _listener.OnSwipeLeft += HandleOnSwipeLeft;
                _listener.OnSwipeRight += HandleOnSwipeRight;
            }
        }

        void HandleOnSwipeLeft(object sender, EventArgs e) =>
            ((GestureScrollView)Element).OnSwipeLeft();

        void HandleOnSwipeRight(object sender, EventArgs e) =>
            ((GestureScrollView)Element).OnSwipeRight();
    }

    public class CustomGestureListener : GestureDetector.SimpleOnGestureListener
    {
        static readonly int SWIPE_THRESHOLD = 100;
        static readonly int SWIPE_VELOCITY_THRESHOLD = 100;

        MotionEvent mLastOnDownEvent;

        public event EventHandler OnSwipeLeft;
        public event EventHandler OnSwipeRight;

        public override bool OnDown(MotionEvent e)
        {
            mLastOnDownEvent = e;

            return true;
        }

        public override bool OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
        {
            if (e1 == null)
                e1 = mLastOnDownEvent;

            float diffY = e2.GetY() - e1.GetY();
            float diffX = e2.GetX() - e1.GetX();

            if (Math.Abs(diffX) > Math.Abs(diffY))
            {
                if (Math.Abs(diffX) > SWIPE_THRESHOLD && Math.Abs(velocityX) > SWIPE_VELOCITY_THRESHOLD)
                {
                    if (diffX > 0)
                        OnSwipeRight?.Invoke(this, null);
                    else
                        OnSwipeLeft?.Invoke(this, null);
                }
            }

            return base.OnFling(e1, e2, velocityX, velocityY);
        }
    }
}

И в Xaml

Поместите StackLayout в ScrollView

<local:GestureScrollView SwipeRight="RightSwipe">
     <StackLayout x:Name="firstLlayout" >

        //...        
     </StackLayout>

          
</local:GestureScrollView>
person Lucas Zhang    schedule 05.12.2019
comment
Теперь заметил, что изначально не работает свайп. Попробовав пару раз, начинает работать. Я удалил корневой стек, но проблема все еще не устранена. Любые комментарии? - person Sreejith Sree; 05.12.2019