CODEWITHSUNDEEP
androidxamlxamarinxamarin.forms
Daniel
Daniel

Reputation: 795

Xamarin.Forms swipe gesture recognizer

Xamarin.Forms is very new and very exciting, but for now I see that it has limited documentation and a few samples. I'm trying to make an app with an interface similar to the "MasterDetailPage" one, but also having a right Flyout view, not only the left one.

I've seen that this is not possible using the current API, and so my approach was this:

  1. Create a shared GestureRecognizer interface.
  2. In Android app and iOS in bind this interface to the UIGestureRecognizer on iOS or the OnTouch method on the android.

For iOS this is working but for Android the touch listener over the activity doesn't seem to work.

Is my approach good? Maybe there is another good method to capture touch events directly from the shared code? Or do you have any ideas why the public override bool OnTouchEvent doesn't work in an AndroidActivity?

Upvotes: 19

Views: 5208

Answers (3)

G.Mich
G.Mich

Reputation: 1666

For Xamarin.Forms swipe gesture recognizer add SwipeGestureRecognizer 

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

Here is the equivalent C# code:

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);

For more check here : https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/swipe

Upvotes: 1

Damir Beylkhanov
Damir Beylkhanov

Reputation: 545

I advise you to use the CarouselView approach, f.e. you can use already existing solutions with carousel view which are supports swipe gestures. So in result your view will be wrapped into this carousel view control

Upvotes: 0

Herman
Herman

Reputation: 1532

The MasterDetailPage, and other shared elements, are just containers for view renderers to pick up. You best option would be to create a custom LRMasterDetailPage (left-right..) and give it properties for both the DetailLeft and DetailRight. Then you implement a custom ViewRenderer per platform for this custom element.

The element:

public class LRMasterDetailPage {
    public View LeftDetail;
    public View RightDetail;
    public View Master;
}

The renderer:

[assembly:ExportRenderer (typeof(LRMasterDetailPage), typeof(LRMDPRenderer))]
namespace App.iOS.Renderers
{
    public class LRMDPRenderer : ViewRenderer<LRMasterDetailPage,UIView>
    {
        LRMasterDetailPage element;

        protected override void OnElementChanged (ElementChangedEventArgs<LRMasterDetailPage> e)
        {
            base.OnElementChanged (e);
            element = e.NewElement;
            // Do someting else, init for example
        }

        protected override void OnElementPropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Renderer")
                    return;
            base.OnElementPropertyChanged (sender, e);

            if (e.PropertyName == "LeftDetail")
                updateLeft();

            if (e.PropertyName == "RightDetail")
                updateRight();
        }

        private void updateLeft(){
            // Insert view of DetailLeft element into subview
            // Add button to open Detail to parent navbar, if not yet there
            // Add gesture recognizer for left swipe
        }
        private void updateRight(){
            // same as for left, but flipped
        }
    }
}

Upvotes: 0

Related Questions