This content originally appeared on Telerik Blogs and was authored by Leomaris Reyes
As a multiplatform, mobile-centric framework, of course .NET MAUI is going to provide excellent options for touch interactions. Let’s explore the long press.
Incorporating functionalities that respond to specific screen gestures can make our app more robust and provide quicker access to various features.
In .NET MAUI, we can identify multiple gestures. In this article, we will focus on how to handle the long press interaction, one of the many different types of TouchBehaviors we can detect. (✍️ If you want to read more information about TouchBehavior, you can read this article.)
First of All … What Do I Need to Know?
What Is a Behavior?
In case you don’t know, behaviors let you attach a piece of functionality to an element in a view. This feature can be reusable and give us an easy way to do unit testing. (✍️ If you want to know more information about behaviors, I invite you to read this Learn article.
What Is Touch Behavior?
Previously known as TouchEffect in the Xamarin Community Toolkit, it has now transitioned to the .NET MAUI Community Toolkit under the name TouchBehavior. This behavior can be attached to any screen element, enabling interaction based on touch events, clicks and/or mouse hovers.
Furthermore, it permits us to change the visual properties of the attached element, such as the background color or opacity.
What Is .NET MAUI Community Toolkit?
The .NET MAUI Community Toolkit is a curated collection of reusable components thoughtfully developed by the community. It encompasses a range of elements such as animations, converters and behaviors, all designed to accelerate app development. What’s more, it provides easy compatibility across iOS, Android, macOS and WinUI, all thanks to the power of MAUI.
Initial Setup
To correctly implement the TouchBehavior, make sure that the .NET MAUI Community Toolkit is properly configured in your app. Setting it up is straightforward, as outlined in the steps below:
1. Installation: First, make sure to install the toolkit by adding the Community.Toolkit.Maui NuGet package.
2. Setup in MauiProgram.cs: After adding the NuGet package, navigate to MauiProgram.cs. Right below UseMauiApp<App>(), append:
.UseMauiCommunityToolkit()
3. Namespace Addition: Include the toolkit namespace in your page:
xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolki](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)t”
Long Press Interaction
Touch Behavior defines the action that should occur when a user presses the screen for an extended period. Unlike quick actions like a touch or a click, it specifically detects prolonged screen presses. For instance, when a user long-presses on text, it becomes shaded and can be copied. Another example is the text being sent to a new page.
How to Use Long Press
Properties
Let’s start by understanding the specific properties that are available for the long press. They are as follows:
➖ LongPressDuration: It allows you to set the duration that you consider necessary to indicate that your gesture is a long press interaction. This duration is set in milliseconds, and the property receives an Int as a value.
➖ LongPressCommand: It is the command that will be invoked when the user has completed a long press.
➖ LongPressCommandParameter: This property enables you to send the required parameters to the Command.
Event
Besides the properties mentioned earlier, long press also has the following event:
➖ LongPressCompleted: This triggers when a long press gesture is completed.
Learning Long Press Structure
The previous image illustrates the simple structure that you need to implement for a visual element. This structure can be broken down into the following steps:
1. <Declare your control>: This step involves adding the start and end tags of the control to which you want to attach the Behavior. For example, if you’re working with an image, your structure would look like this:
<Image></Image>
2. <Control type.Behaviors>: This tag allows you to indicate that you wish to add a Behavior to a visual element. For instance, in the case of an Image, the tag would be something like the following:
<Image.Behaviors></Image.Behaviors>
3. <toolkit alias:TouchBehavior …>: This tag allows you to specify the desired behavior. The prefix “toolkit alias” refers to the alias you assigned to the namespace of your XAML for referring to the community toolkit—in my case, “toolkit.”
Following this, you’ll see “TouchBehavior.” Here, you can append any of the long press properties defined earlier. For example:
<toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}" LongPressDuration="750"/>
Now, Let’s Create an Example!
We will use the example from the previous explanation and apply it to an image. We’ll define a duration and a command for when a long press is detected on the image.
Creating the XAML
Within a VerticalStackLayout, we will include an image that has the long press behavior. Additionally, we’ll retain the button that comes with the .NET MAUI template by default.
<VerticalStackLayout Padding="30,0" Spacing="25">
<Image
Source="dotnet_bot.png"
HeightRequest="185"
Aspect="AspectFit">
<Image.Behaviors>
<toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}" LongPressDuration="750"/>
</Image.Behaviors>
</Image>
<Button
x:Name="CounterBtn"
Text="Click me"
HorizontalOptions="Fill" />
</VerticalStackLayout>
Create the Command
public partial class MainPage : ContentPage
{
int count = 0;
public Command LongPressCommand { get; set; }
public MainPage()
{
InitializeComponent();
LongPressCommand = new Command(() =>
{
count++;
if (count == 1)
CounterBtn.Text = $"Long pressed {count} time";
else
CounterBtn.Text = $"Long pressed {count} times";
});
BindingContext = this;
}
}
This example was based on Gerald Verluis’s long press video.
Finally, run the project. Every time you click or tap on the image for 2 seconds, the count of the occurrences will be displayed on the button. Let’s see the example below!
Conclusion
In just a few simple steps, we created an app that detects when the user long-presses on any visual element of .NET MAUI. This functionality provides quicker access to both new and existing features of our app. Moving forward, consider implementing it in your applications!
I hope you found this article useful!
See you next time! ♀️
References
This article was based on the official documentation:
And Gerald Versluis’s video:
This content originally appeared on Telerik Blogs and was authored by Leomaris Reyes
Leomaris Reyes | Sciencx (2024-07-18T07:34:01+00:00) Exploring Long Press in .NET MAUI Community Toolkit. Retrieved from https://www.scien.cx/2024/07/18/exploring-long-press-in-net-maui-community-toolkit/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.