Telerik blogs
XamarinT2 Dark_1200x303

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… 💭 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? 🤔

➖ What is an Experimental Preview?

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.)

📗 As it is in experimental preview, you can’t forget to apply the configuration explained above.

SwipeView Xamarin.Forms

⚠ 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! 

![1. Declare <SwipeView> tags 2. Select a property for your view: LeftItems, RightItems, TopItems or BottomItems   3. Declare <SwipeItems> tags  4. Declare as many items as you need, each one must declare it with the SwipeItem tag and inside you can add properties such as: Text, IconImageSource, BackgroundColor, Invoked (Or this event)  5. Close all the opened tags (Except SwipeView tag)  6. Create the layout in which will be contained the SwipeView, in this case I used the Grid.  7. Close <SwipeView> tags

Invoked event is fired when the swipe item is executed.


And now let’s code the example!

        <SwipeView.TopItems>  

                <SwipeItem Text="Delete" 

                           IconImageSource="delete.png" 

                           BackgroundColor="Red" 

                           Invoked="OnDeleteSwipeItemInvoked" /> 

            </SwipeItems> 

        </SwipeView.TopItems> 

           <!-- Layout in which will be contained the SwipeView --> 

        <Grid HeightRequest="60" 

              WidthRequest="300" 

              BackgroundColor="Gray"> 

            <Label Text="Fry Chicken" 

                   HorizontalOptions="Center" 

                   VerticalOptions="Center" /> 

        </Grid> 

    </SwipeView>

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!

📒 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>

📕 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! ☺️

Thanks for reading! 💚

References:

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


LeomarisReyes
About the Author

Leomaris Reyes

Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of  Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.

Related Posts

Comments

Comments are disabled in preview mode.