CODEWITHSUNDEEP
c#xamlxamarin.formsxamarin.android
The OrangeGoblin
The OrangeGoblin

Reputation: 794

Swipe through previous images

I have an app developed in Xamarin with VS2017. I have a page that the user uses to add images.

enter image description here

As you can see from the screen shot, the user clicks the button to add a maximum of six images per day.

What I want to be able to do is swipe left to right to go back in time dynamically. This means I will show images for yesterday with one swipe and then the day before with another swipe and so on.

I was thinking of using a carousel, but if I have a few months worth of images, it would be massive. I have managed to get it working by using a date time picker, but the customer wants to swipe!!!

I really don't know where to start in terms of research and finding a solution, so any pointers will be greatly received.

In summary, I want to be able to go back in time by swiping left to right and then forward by right to left swipes.

TIA

Upvotes: 1

Views: 242

Answers (1)

Bruno Caceiro
Bruno Caceiro

Reputation: 7179

You can declare a custom view with Swipe .

public class SwipeContainer : ContentView
{
    public event EventHandler<SwipedEventArgs> Swipe;

    public SwipeContainer()
    {
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Left));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Right));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Up));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Down));
    }

    SwipeGestureRecognizer GetSwipeGestureRecognizer(SwipeDirection direction)
    {
        var swipe = new SwipeGestureRecognizer { Direction = direction };
        swipe.Swiped += (sender, e) => Swipe?.Invoke(this, e);
        return swipe;
    }
}

And then in your page:

<ContentPage ...>
    <StackLayout>
        <local:SwipeContainer Swipe="OnSwiped">
        </local:SwipeContainer>
    </StackLayout>
</ContentPage>

And deal with the OnSwiped event in code-behind:

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

Upvotes: 1

Related Questions