Gestures
Important
This project is an experimental release. We hope you try out Experimental Mobile Blazor Bindings and provide feedback at https://github.com/xamarin/MobileBlazorBindings.
Overview
Gesture recognizers can be used to detect user interaction with views in applications.
Gesture recognizers are attached to a control and specify which gestures to respond to along with an event to handle the response. Gestures such as tap, pinch, pan, and swipe are supported. Gestures can be added to any component that derives from View
or GestureElement
. See the components reference for more details.
Add a gesture to a component
The following sample adds a tap gesture to a Label
component and updates its text when it is tapped.
<ContentView>
<Label Text="@($"I was tapped {count} times")" FontSize="40">
<TapGestureRecognizer OnTapped="@OnLabelTapped" />
</Label>
</ContentView>
@code
{
int count;
void OnLabelTapped()
{
count++;
StateHasChanged();
}
}
Note
The event handler code ends with calling StateHasChanged()
to tell Blazor to re-render the component. Otherwise the count will be incremented and the change will not be shown.
Supported gestures
The following example shows the syntax of the supported gestures and their respective events:
<ContentView>
<StackLayout>
<Label Text="...">
<TapGestureRecognizer NumberOfTapsRequired="1" OnTapped="@OnLabelTapped" />
<PanGestureRecognizer OnPanUpdated="@OnLabelPanned" />
<SwipeGestureRecognizer Direction="SwipeDirection.Left" OnSwiped="@OnLabelSwiped" />
<SwipeGestureRecognizer Direction="SwipeDirection.Right" OnSwiped="@OnLabelSwiped" />
<PinchGestureRecognizer OnPinchUpdated="@OnLabelPinched" />
</Label>
</StackLayout>
</ContentView>
@code
{
void OnLabelTapped()
{
// TODO: Response to tap gesture
StateHasChanged();
}
void OnLabelPanned(PanUpdatedEventArgs e)
{
// TODO: Response to pan gesture
// Check e.StatusType, e.TotalX, and e.TotalY
StateHasChanged();
}
void OnLabelSwiped(SwipedEventArgs e)
{
// TODO: Response to swipe gesture
// Check e.Direction
StateHasChanged();
}
void OnLabelPinched(PinchGestureUpdatedEventArgs e)
{
// TODO: Response to pinch gesture
// Check e.Scale, e.ScaleOrigin, and e.Status
StateHasChanged();
}
}
More information
See the Xamarin.Forms gestures documentation for more information and examples.