Search⌘ K
AI Features
Home
Courses
Building Cross-Platform Applications with .NET MAUI

MAUI Gesture Detection

Explore how to detect and handle gestures in .NET MAUI apps including swipe and refresh gestures. Learn to use RefreshView for pull-to-refresh, SwipeView to reveal controls on swipe, and GestureRecognizers to attach gesture events to views. Gain practical skills to enhance mobile user interactions in cross-platform apps.

We'll cover the following...

Gesture detections are very important to native apps, especially mobile apps. They might not be as relevant to desktop applications because for those we use a mouse cursor instead of touchscreen gestures. But mobile application developers definitely need to be familiar with gestures.

Example of using a gesture
Example of using a gesture

We'll cover multiple ways of detecting gestures in a .NET MAUI app. We'll do so with the aid of the following project setup:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiGesturesDemo"
             x:Class="MauiGesturesDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
Gestures in MAUI app

Refreshing view

In mobile apps, it's common to see the functionality to refresh the view when a user swipes down. For example, this functionality is very common in mobile web browsers. In .NET MAUI, this functionality is enabled via the RefreshView control.

How RefreshView works
How RefreshView works

We have an example of this control on lines 12–19 of the MainPage.xaml file of the above setup. The view has the name refreshView. The markup looks as follows:

XML
<RefreshView x:Name="refreshView" RefreshColor="Green">
    <ScrollView>
        <Label Text="RefreshView example"
            HorizontalOptions="Center"
            VerticalOptions="Center" />  
    </ScrollView>
                    
</RefreshView>

We can now open the MainPage.xaml.cs file to see how we can configure refresh logic, which ...