Xamarin表单向左滑动/向右滑动手势

时间:2015-04-30 15:54:48

标签: c# xaml xamarin xamarin.forms

我想通过说我对移动开发,Xamarin,C#,。Net完全陌生来为此做准备。

我正致力于使用Xamarain Forms创建移动应用,并且遇到了无法使用滑动手势的问题,至少根据我见过的文档。

我找到了这个网站:http://arteksoftware.com/gesture-recognizers-with-xamarin-forms/

这描述了如何为表单上下文中的IOS / Android添加一些额外的手势。在我尝试遵循此操作之前,我想看看是否有其他人在Xamarin Forms应用程序中实现了滑动以及它们是如何实现的。

我的目标是必须有一个水平堆栈布局。此布局包含7个按钮,每个按钮反映当前一周的一天。在堆栈布局上向左滑动会将按钮的文本更改为上一周。向右滑动会将按钮的文字更改为下周。

所以我也尝试使用MVVM和XAML。那么我可以分开向左滑动和向右滑动动作吗?我想使用ICommand根据滑动的方向将某个参数传递给函数。

非常感谢这个或任何建议的任何例子。

7 个答案:

答案 0 :(得分:26)

不需要第三方图书馆..无需付费..只需添加这两个类&实现您的滑动侦听器

第1步:复制粘贴这两个类

<强> SwipeListener.cs

using System;
using Xamarin.Forms;
namespace SwipeLib
{  
public interface ISwipeCallBack
{

    void onLeftSwipe(View view);
    void onRightSwipe(View view);
    void onTopSwipe(View view);
    void onBottomSwipe(View view);
    void onNothingSwiped(View view);
}
}

<强> ISwipeCallBack.cs

 SwipeListener swipeListener = new SwipeListener(lbl_swipe, this);

第2步:从您的Xamarin表单传递视图&amp;界面obj。然后你得到结果

在我的情况下,我传递了标签

public partial class SwipeLibPage : ContentPage, ISwipeCallBack

第3步:实施ISwipeCallBack界面

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

示例项目 - &gt; https://github.com/rranjithkumar100/Xamarin-Swipe-Library

答案 1 :(得分:8)

Xamarin.Forms引入了SwipeGestureRecognizer:

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

答案 2 :(得分:7)

您可以随时查看this简单演示。并使用如下:

GestureFrame gi = new GestureFrame
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.FromHex("bf3122"),
        };

        gi.SwipeDown += (s, e) =>
        {
            DisplayAlert("Gesture Info", "Swipe Down Detected", "OK");
            ViewModel.SampleCommand.Execute("Swipe Down Detected");
        };

        gi.SwipeTop += (s, e) =>
        {
            DisplayAlert("Gesture Info", "Swipe Top Detected", "OK");
            ViewModel.SampleCommand.Execute("Swipe Top Detected");
        };

        gi.SwipeLeft += (s, e) =>
        {
            DisplayAlert("Gesture Info", "Swipe Left Detected", "OK");
            ViewModel.SampleCommand.Execute("Swipe Left Detected");
        };

        gi.SwipeRight += (s, e) =>
        {
            DisplayAlert("Gesture Info", "Swipe Right Detected", "OK");
            ViewModel.SampleCommand.Execute("Swipe Right Detected");
        };

        this.Content = gi;

答案 3 :(得分:6)

仅供参考

SwipeView在Xamarin.Forms 4.4中可用。

SwipeView类还定义了四个事件:

滑动开始时会触发

SwipeStarted 。伴随此事件的SwipeStartedEventArgs对象具有SwipeDirection类型的SwipeDirection属性。

滑动时会触发

SwipeChanging 。 伴随此事件的SwipeChangingEventArgs对象具有SwipeDirection类型的SwipeDirection属性和double类型的Offset属性。

滑动结束后会触发

SwipeEnded 。与此事件一起发生的SwipeEndedEventArgs对象具有SwipeDirection类型的SwipeDirection属性。

关闭滑动项目时会触发

CloseRequested 。 此外,SwipeView定义了一个Close方法,该方法将关闭滑动项。

enter image description here

有关某些Xamarin表单新功能的详细信息,请访问此link

答案 4 :(得分:2)

在@Ranjith Kumar的解决方案的基础上,我想出了以下内容:

public delegate void SwipedEventHandler(ISwipeListener sender, SwipedEventArgs e);

public class SwipedEventArgs : EventArgs
{
    readonly double _x;
    public double X => _x;

    readonly double _y;
    public double Y => _y;

    readonly View _view;
    public View View => _view;

    public SwipedEventArgs(View view, double x, double y)
    {
        _view = view;
        _x = x;
        _y = y;
    }
}

public interface ISwipeListener
{
    event SwipedEventHandler SwipedDown;

    event SwipedEventHandler SwipedLeft;

    event SwipedEventHandler SwipedNothing;

    event SwipedEventHandler SwipedRight;

    event SwipedEventHandler SwipedUp;

    double TotalX
    {
        get;
    }

    double TotalY
    {
        get;
    }
}

public class SwipeListener : PanGestureRecognizer, ISwipeListener
{
    public event SwipedEventHandler SwipedDown;

    public event SwipedEventHandler SwipedLeft;

    public event SwipedEventHandler SwipedNothing;

    public event SwipedEventHandler SwipedRight;

    public event SwipedEventHandler SwipedUp;

    double _totalX = 0, _totalY = 0;

    public double TotalX => _totalX;

    public double TotalY => _totalY;

    readonly View _view;

    public SwipeListener(View view) : base()
    {
        _view = view;
        _view.GestureRecognizers.Add(this);
        PanUpdated += OnPanUpdated;
    }

    void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Running:
                try
                {
                    _totalX = e.TotalX;
                    _totalY = e.TotalY;
                }
                catch (Exception exception)
                {
                    Debug.WriteLine(exception.Message);
                }
                break;

            case GestureStatus.Completed:
                if (_totalX < 0 && Math.Abs(_totalX) > Math.Abs(_totalY))
                {
                    OnSwipedLeft(_totalX, _totalY);
                }
                else if (_totalX > 0 && _totalX > Math.Abs(_totalY))
                {
                    OnSwipedRight(_totalX, _totalY);
                }
                else if (_totalY < 0 && Math.Abs(_totalY) > Math.Abs(_totalX))
                {
                    OnSwipedUp(_totalX, _totalY);
                }
                else if (_totalY > 0 && _totalY > Math.Abs(_totalX))
                {
                    OnSwipedDown(_totalX, _totalY);
                }
                else OnSwipedNothing(_totalX, _totalY);
                break;

        }
    }

    protected virtual void OnSwipedDown(double x, double y)
        => SwipedDown?.Invoke(this, new SwipedEventArgs(_view, x, y));

    protected virtual void OnSwipedLeft(double x, double y)
        => SwipedLeft?.Invoke(this, new SwipedEventArgs(_view, x, y));

    protected virtual void OnSwipedNothing(double x, double y)
        => SwipedNothing?.Invoke(this, new SwipedEventArgs(_view, x, y));

    protected virtual void OnSwipedRight(double x, double y)
        => SwipedRight?.Invoke(this, new SwipedEventArgs(_view, x, y));

    protected virtual void OnSwipedUp(double x, double y)
        => SwipedUp?.Invoke(this, new SwipedEventArgs(_view, x, y));
}

缺点是,只有在执行滑动后才能执行任何操作。

答案 5 :(得分:2)

也许这可以帮助别人。

我遇到了一个问题:有一个带有scrollview和grid的ContentPage。我需要做的就是处理向左/向右滑动手势。 在搜索了google / stackoverflow / github之后,我找到了一个名为XamarinFormsGestures的Nuget包。这对我帮助很大。所有指令都在链接内。 有我的代码:

Vapolia.Lib.Ui.Gesture.SetSwipeLeftCommand(scrollviewgrid, 
new Command(() => { OnLeftSwipe(); })); // What's going on when left swiped.
Vapolia.Lib.Ui.Gesture.SetSwipeRightCommand(scrollviewgrid, 
new Command(() => { OnRightSwipe(); })); // What's going on when right swiped.

答案 6 :(得分:0)

您可以使用Vapolia的NuGet包“XamarinFormsGesture”(doc available here)。它免费且易于使用。

适用于iOS和Android,但它仅适用于物理设备(不适用于模拟器)。