Building Cross-Platform Applications with .NET MAUI/

...

/

MAUI Gesture Detection

MAUI Gesture Detection

Learn how to detect gestures in a MAUI app.

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.

Press + to interact
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.

Press + to interact
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:

Press + to interact
<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 ...