.NET MAUI CollectionView Swiping Events
The following RadCollectionView events are related to the item swiping feature:
-
SwipeStarting—Occurs when an item is about to be swiped. The event arguments are of theCollectionViewSwipeStartingEventArgstype that provides the following properties:-
Item(object)—The item that will be swiped. -
Cancel(bool)—If you set this value tofalse, the swiping will be canceled.
-
-
Swiping—Occurs while the user is swiping the item. The event arguments are of theCollectionViewSwipingEventArgstype that provides the following properties:-
Item(object)—The item that is being swiped. -
Offset(double)—The offset of the swiped item from its initial position.
-
-
SwipeCompleted—Occurs when the swiping of an item is completed. The event arguments are of theCollectionViewSwipeCompletedEventArgstype that provides the following properties:-
Item(object)—The item that was swiped. -
Offset(double)—The final offset of the swiped item.
-
Check a simple example where the swiping events are used:
1. Add a CollectionView definition with the swiping events defined:
<Grid RowDefinitions="Auto, *"
RowSpacing="16">
<Grid ColumnDefinitions="Auto, *"
ColumnSpacing="4"
Padding="16, 0">
<Label Text="Log: "
Style="{StaticResource LogLabelStyle}" />
<Label x:Name="swipeActionLog"
Grid.Column="1"
Style="{StaticResource LogLabelStyle}" />
</Grid>
<telerik:RadCollectionView x:Name="collectionView"
Grid.Row="1"
ItemsSource="{Binding Locations}"
IsItemSwipeEnabled="True"
StartSwipeTemplate="{StaticResource StartSwipeItemTemplate}"
EndSwipeTemplate="{StaticResource EndSwipeItemTemplate}"
SwipeStarting="OnSwipeStarting"
Swiping="OnSwiping"
SwipeCompleted="OnSwipeCompleted"
StartSwipeLength="50"
EndSwipeLength="50"
SwipeThreshold="25">
<telerik:RadCollectionView.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout Spacing="4"
Padding="16, 8">
<Label Text="{Binding City}"
VerticalTextAlignment="Center" />
<Label FontFamily="TelerikFontExamples"
FontSize="12"
Text="{Binding Visited, Converter={StaticResource VisitedToIconConverter}}"
TextColor="#D67F3C"
VerticalTextAlignment="Center" />
</HorizontalStackLayout>
</DataTemplate>
</telerik:RadCollectionView.ItemTemplate>
<telerik:RadCollectionView.BindingContext>
<local:ViewModel />
</telerik:RadCollectionView.BindingContext>
</telerik:RadCollectionView>
</Grid>
2. Add sample StartSwipeTemplate and EndSwipeTemplate DataTemplates to the page's resources:
<telerik:BoolToValueConverter x:Key="VisitedToIconConverter" TrueValue="" FalseValue="" />
<DataTemplate x:Key="StartSwipeItemTemplate">
<Grid BackgroundColor="#00897B"
Padding="12, 0"
HorizontalOptions="Fill"
VerticalOptions="Fill">
<telerik:RadPath Geometry="{x:Static telerik:RadGeometry.Star}"
Fill="White"
StrokeThickness="0"
WidthRequest="16"
HeightRequest="16"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="EndSwipeItemTemplate">
<Grid BackgroundColor="#89000E"
Padding="12, 0"
HorizontalOptions="Fill"
VerticalOptions="Fill">
<Label FontFamily="{x:Static telerik:TelerikFont.Name}"
FontSize="16"
Text="{x:Static telerik:TelerikFont.IconDelete}"
TextColor="White"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
3. Add the event handlers in code-behind:
private void OnSwipeStarting(object sender, CollectionViewSwipeStartingEventArgs e)
{
var item = (DataModel)e.Item;
if(item.Country == "Spain")
{
e.Cancel = true;
this.swipeActionLog.Text = $"Swiping cities in {item.Country} is canceled";
}
}
private void OnSwiping(object sender, CollectionViewSwipingEventArgs e)
{
var item = (DataModel)e.Item;
this.swipeActionLog.Text = $"Swiping {item.City} with Offset: {e.Offset:F0}";
}
private async void OnSwipeCompleted(object sender, CollectionViewSwipeCompletedEventArgs e)
{
var item = (DataModel)e.Item;
this.swipeActionLog.Text = $"SwipeCompleted {item.City}";
if (e.Offset <= -25)
{
await Task.Delay(200);
(this.collectionView.BindingContext as ViewModel).Locations.Remove(item);
this.swipeActionLog.Text += $", deleted {item.City}";
this.collectionView.EndItemSwipe(false);
}
else if (e.Offset >= 25)
{
await Task.Delay(200);
item.Visited = !item.Visited;
this.swipeActionLog.Text += $", updated {item.City}";
this.collectionView.EndItemSwipe();
}
}
4. Add a sample ViewModel class:
public class ViewModel : NotifyPropertyChangedBase
{
public ViewModel()
{
this.Locations = new ObservableCollection<DataModel>
{
new DataModel { Country = "Austria", City = "Vienna", Visited = true },
new DataModel { Country = "Belgium", City = "Antwerp" },
new DataModel { Country = "Denmark", City = "Copenhagen" },
new DataModel { Country = "France", City = "Nice" },
new DataModel { Country = "France", City = "Paris", Visited = true },
new DataModel { Country = "Germany", City = "Berlin", Visited = true },
new DataModel { Country = "Germany", City = "Munich" },
new DataModel { Country = "Germany", City = "Nuremberg", Visited = true },
new DataModel { Country = "Italy", City = "Bari" },
new DataModel { Country = "Italy", City = "Rome" },
new DataModel { Country = "Netherlands", City = "Amsterdam" },
new DataModel { Country = "Portugal", City = "Lisbon" },
new DataModel { Country = "Spain", City = "Barcelona" },
new DataModel { Country = "Spain", City = "Madrid" },
new DataModel { Country = "United Kingdom", City = "London" },
new DataModel { Country = "United Kingdom", City = "Manchester" },
new DataModel { Country = "United States", City = "New York" },
new DataModel { Country = "United States", City = "Los Angeles" },
new DataModel { Country = "United States", City = "Chicago" },
new DataModel { Country = "United States", City = "Boston" },
new DataModel { Country = "United States", City = "San Francisco" },
new DataModel { Country = "Canada", City = "Vancouver" },
new DataModel { Country = "Brazil", City = "Rio de Janeiro" },
new DataModel { Country = "Brazil", City = "Sao Paulo" },
new DataModel { Country = "Argentina", City = "Buenos Aires" },
new DataModel { Country = "Peru", City = "Lima", Visited = true },
new DataModel { Country = "Colombia", City = "Bogota" },
new DataModel { Country = "Bolivia", City = "La Paz" },
new DataModel { Country = "Venezuela", City = "Caracas" },
new DataModel { Country = "Chile", City = "Santiago" },
new DataModel { Country = "China", City = "Hong Kong" },
new DataModel { Country = "China", City = "Shanghai" },
new DataModel { Country = "India", City = "Delhi" },
new DataModel { Country = "Japan", City = "Tokyo", Visited = true },
new DataModel { Country = "Japan", City = "Osaka" },
new DataModel { Country = "Vietnam", City = "Hanoi" },
new DataModel { Country = "Thailand", City = "Bangkok" },
new DataModel { Country = "Thailand", City = "Phuket" },
new DataModel { Country = "Nigeria", City = "Lagos" },
new DataModel { Country = "Egypt", City = "Cairo" },
new DataModel { Country = "Algeria", City = "Algiers" },
new DataModel { Country = "Australia", City = "Sydney", Visited = true },
new DataModel { Country = "Australia", City = "Melbourne" },
new DataModel { Country = "New Zealand", City = "Auckland" },
new DataModel { Country = "New Zealand", City = "Wellington" }
};
}
public ObservableCollection<DataModel> Locations { get; set; }
}
5. Add a sample DataModel class:
public class DataModel : NotifyPropertyChangedBase
{
private string country;
private string city;
private bool visited;
public string Country
{
get => this.country;
set => this.UpdateValue(ref this.country, value);
}
public string City
{
get => this.city;
set => this.UpdateValue(ref this.city, value);
}
public bool Visited
{
get => this.visited;
set => this.UpdateValue(ref this.visited, value);
}
}