adospace / reactorui-maui

MauiReactor is a MVU UI framework built on top of .NET MAUI
MIT License
600 stars 50 forks source link

Is there a GestureRecognizer sample code #42

Closed flexi-git closed 1 year ago

flexi-git commented 1 year ago

Hi Ado, I hope you're doing well. I would like to ask if there are sample code for gesture recognizer (ie. swipe(direction: left; right; top; bottom), drag and drop) in your sample repositories that I can look and try. I think the common use case is swipe to reveal the menu choices for delete or edit. Thank you

adospace commented 1 year ago

Hi, usually it's enough to create an object of type SwipeGestureRecognizer like shown in this example:

new VStack(spacing: 2)
{
    new Label(_name),
    new Label(_label),

    new SwipeGestureRecognizer()
        .Direction(SwipeDirection.Right)
        .Threshold(10)
        .OnSwiped(OnSwipedRight)
}

but if you need to move something when the user swipes an object to the right/left, you may need a CanvasView with the PointInteractionHandler or the PanGestureRecognizer.

Can you specify better where you need the swipe operation? inside a collectionview?

flexi-git commented 1 year ago

Thank you Ado, your code works perfectly fine and the implementation is a breeze. I'll be using swipegesture operation in my collectionview, if the user swipe halfway I'll be showing a menu to delete or edit, but if the user swipe all the way to the right/left I'll be calling the delete method.

Also, how can I pass the direction SwipedEventArgs parameter in my method if let say I have two swipegesture?

`new VStack(spacing: 2) { new Label(_name), new Label(_label),

new SwipeGestureRecognizer()
    .Direction(SwipeDirection.Right)
    .Threshold(10)
    .OnSwiped(onSwiped),

new SwipeGestureRecognizer() .Direction(SwipeDirection.Left) .Threshold(10) .OnSwiped(onSwiped) }

async void onSwipe(object sender, SwipedEventArgs e) { switch (e.Direction) { case SwipeDirection.Left: // Handle the swipe break; case SwipeDirection.Right: // Handle the swipe break; } }`

Or do I need two method one for SwipeLeft and antoher one for SwipeRight?

adospace commented 1 year ago

Yes, you can define 2 methods SwipeLeft or SwipeRight or you can do as you did above with one single method accepting (object sender, SwipedEventArgs e).

I'm going to provide a sample that shows the swiping behavior in the test app

flexi-git commented 1 year ago

Yes please, I appreciate if you can provide sample code that show swipe behavior and PanGesture will help us in future project. I'm trying to achieve below image, similar to Inbox. Thank you image