Learning about SwipeView in Xamarin Forms

Hidden menus make applications more aesthetic and easy to use by keeping some options hidden. This post explores how this works using the SwipeView control in Xamarin Forms.

Have you ever seen apps with cool hidden menus with a set of options that you need to slide left or right to get to them? No? Let me give an example… :thought_balloon: imagine a restaurant app in which you have a list of foods and within that list you can slide the chosen food. By doing this slide, you can see different actions that were hidden ( for example, modify or delete food ).

Thanks to these types of menus, we can make our applications more aesthetic and reduce space in the interface design by keeping some options hidden, making our user experience more intuitive and fun! And guess what!? In Xamarin Forms this control is named SwipeView and in this article we will be learning how to use it! Let’s see!

First of all… What Do I Need to Know?

:heavy_minus_sign: What is an Experimental Preview?

An Experimental Preview is a set of functions or libraries from preview versions of Xamarin.Forms that is available for experimental purposes. To learn more about it, you can read this article .

⚠ It’s important to know that being an Experimental Preview does not make the components less important. On the contrary, they are put in this way to improve the experiences and the operation obtained thanks to the use, implementation and feedback from the users!

As SwipeView is an Experimental Preview, you need to indicate that you want to enable it so you can use it. You must add a configuration in the following files:

Platform File name Android MainActivity.cs iOS AppDelegate.cs

In the indicated files for each platform, add the following line of code just before calling Forms.Init() :

Forms.SetFlags(“SwipeView_Experimental”);

Let’s Start!

✔ What is SwipeView?

SwipeView is a container control that is available in Xamarin.Forms 4.4 as experimental preview. It wraps around an item of content and provides context menu items that are revealed by a swipe gesture. By default, once a swipe item has been executed the swipe items are hidden and the SwipeView content is re-displayed. (This behavior can be modified.)

⚠ Image obtained from Microsoft official documentation.

Knowing the Implementation

Swipeview Structure

In order to implement the SwipeView, we have to declare one of its Properties and populate it with swipe items. We show the structure graphically later, but before that, let’s see in detail what these properties are.

✔ Properties

To make possible the movement inside the SwipeView elements, we have to declare at least one of these properties, and populate it with elements of type SwipeItem, which represents the items that can be shown when the control is swiped Left, Right, Up or Down.

▪ Property name ⬅ LeftItems ➡ RightItems ⬆ TopItems ⬇ BottomItems

⚠ Important to know: These properties define the place where the item will be.

Having understood the properties, now we will see the structure graphically!

⚠ Invoked event is fired when the swipe item is executed.

And now let’s code the example!

Defining the Invoked method:

async void OnDeleteSwipeItemInvoked(object sender, EventArgs e)
            {
                // Here add the action that you want to do when you make a click in the Delete option.
            }

Some Great Features!

With the SwipeItems class, we can define Modes or Behaviors . I’ll show them one by one!

:ledger: Mode: Is a property that allows us to indicate the effect of a swipe interaction.

It should be set to one of the SwipeMode enumeration members:

• Reveal:It indicates that a swipe reveals the swipe items. (Default value)

• Execute:Indicates that a swipe executes the swipe items.

Once executed, the swipe items are closed and the SwipeView content is re-displayed.

Code example

    <SwipeView>  

        <SwipeView.LeftItems>  

           <SwipeItems Mode="Execute">  

             <SwipeItem Text="Delete"

                        IconImageSource="delete.png"     

                        BackgroundColor="LightPink" 

                        Command="{Binding DeleteCommand}" />  

             </SwipeItems>  

       </SwipeView.LeftItems>

    </SwipeView>

:closed_book: Behavior: SwipeItem class has a SwipeBehaviorOnInvoked property, which indicates how a SwipeView behaves after a swipe item is invoked.

It should be set to one of the SwipeBehaviorOnInvoked enumeration members:

• Auto: Indicates that in reveal mode the SwipeView closes after a swipe item is invoked, and in execute mode the SwipeView remains open after a swipe item is invoked. (Default value)

• Close:Indicates that the SwipeView closes after a swipe item is invoked.

• RemainOpen:Indicates that the SwipeView remains open after a swipe item is invoked.

Code example

    <SwipeView>

        <SwipeView.LeftItems>

            <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">

                <SwipeItem Text="Favorite"

                           IconImageSource="favorite.png"

                           BackgroundColor="LightGreen"

                           Invoked="OnFavoriteSwipeItemInvoked" />

                <SwipeItem Text="Delete"

                           IconImageSource="delete.png"

                           BackgroundColor="LightPink"

                           Invoked="OnDeleteSwipeItemInvoked" />

            </SwipeItems>

        </SwipeView.LeftItems>

        <!-- Content -->

    </SwipeView>

And finally… Handling events!

You handle event with the SwipeView:

Event name Description SwipeStarted Fired when a swipe starts SwipeChanging Fired as the swipe moves SwipeEnded Fired when a swipe ends CloseRequested Fired when the swipe items are closed

And that’s all for today! I hope that this post will be of help to you! :relaxed:

Thanks for reading! :green_heart:

References:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/swipeview#swipe-mode