Add a swipe menu to your Xamarin.Forms app

A common pattern in mobile apps is to use a swipe menu, a menu that appears when a user is swiping an item in a list for example. We often see this in mail- and messages apps.

For Xamairn.Forms ListView we had ContextActions. but they were pretty limited. But in the upcoming 4.4.0 release of Xamarin.Forms (now in public preview) a new control is introduced, SwipeView. SwipeView makes it possible to add a swipe menu to any other item. To do that, just wrap any item in a SwipeView. We can add swipe items in any direction, left, right, top, and bottom.

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItem BackgroundColor="Orange" Command="{Binding Star}" Text="Star" IconImageSource="{FontImage FontFamily={StaticResource IconFont}, Glyph={x:Static constants:Icons.Star}, Size=22, Color=White}" />
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
         <SwipeItem BackgroundColor="Red" Command="{Binding Delete}" Text="Ta bort" IconImageSource="{FontImage FontFamily={StaticResource IconFont}, Glyph={x:Static constants:Icons.RecycleBin}, Size=22, Color=White}" />
    </SwipeView.RightItems>
 
<!--Content here-->
</SwipeView>

There are two different types of swipe behaviours/modes you can use for swipe, reveal and execute. Reveal shows options that the user has and to execute it, he/she needs to tap it. If mode is set to Execute, it will execute directly on swipe if the swipe gesture is long enough. To set the mode for swipe items we need to wrap the items in a SwipeItems element as below:

<SwipeView.LeftItems>
    <SwipeItems Mode="Reveal">
        <SwipeItem BackgroundColor="Orange" Command="{Binding Star}" Text="Star" IconImageSource="{FontImage FontFamily={StaticResource IconFont}, Glyph={x:Static constants:Icons.Star}, Size=22, Color=White}" />
    </SwipeItems>
</SwipeView.LeftItems>
<SwipeView.RightItems>
     <SwipeItems Mode="Execute">
         <SwipeItem BackgroundColor="Red" Command="{Binding Delete}" Text="Ta bort" IconImageSource="{FontImage FontFamily={StaticResource IconFont}, Glyph={x:Static constants:Icons.RecycleBin}, Size=22, Color=White}" />
     </SwipeItems>
</SwipeView.RightItems>

I have noticed that it is still some bugs in the control and we can also see that if we take a look at the issue list on GitHub, https://github.com/xamarin/Xamarin.Forms/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+swipeview. But I have started to use it anyway, because it was enought stable for my needs. If you found any bug or have feedback I know that the Xamarin.Forms teams is more than happy if you report it to them.

One thought on “Add a swipe menu to your Xamarin.Forms app

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.