New to Telerik UI for .NET MAUI? Start a free 30-day trial

.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 the CollectionViewSwipeStartingEventArgs type that provides the following properties:
- Item(object)—The item that will be swiped.
- Cancel(bool)—If you set this value to false, the swiping will be canceled.
Swiping—Occurs while the user is swiping the item. The event arguments are of the CollectionViewSwipingEventArgs type 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 the CollectionViewSwipeCompletedEventArgs type 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:

xaml

<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:

xaml

<telerik:BoolToValueConverter x:Key="VisitedToIconConverter" TrueValue="&#xe801;" 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);
    }
}

.NET MAUI CollectionView Swiping Events

See Also