.NET MAUI CollectionView Events

The Telerik UI for .NET MAUI CollectionView component exposes a set of events that users trigger through interaction. You can handle these events and customize the configuration of the UI component.

Item Events

• ItemTapped—Raised when the user taps on the item. The ItemTapped event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadCollectionView type.
  • A RadTappedEventArgs object, which has a reference to the tapped item through its Data(T) property.

• GroupTapped—Raised when the user taps on the group item. The GroupTapped event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadCollectionView type.

  • A RadTappedEventArgs<Telerik.Maui.Controls.CollectionView.GroupContext> object, which has a reference to:

    • the tapped group item through its Data(T) property.

    • the GroupContext represents the object that is passed to the TappedEventArgs for the GroupTapped and the item you have for the GroupViewStyleSelector and GroupHeaderTemplate. The GroupContext includes the following properties:

      • IsExpanded (bool): Defines a value indicating whether the group is currently expanded (has its child items visible).
      • Items (IReadOnlyList<object>): Gets the child items of the group.
      • Key (object): Gets the specific for the group key.
      • Level (int): Gets the zero-based level (or the depth) of the group.

• GroupTapping—Raised when tap is currently performing on the CollectionViewGroupView. The GroupTapping event handler receives two parameters:

  • The sender argument, which is of type object, but can be cast to the RadCollectionView type.

  • A RadTappingEventArgs<Telerik.Maui.Controls.CollectionView.GroupContext> object, which has a reference to:

    • the Cancel (bool) property which can be used to cancel the tapping.

    • the GroupContext represents the object that is passed to the TappedEventArgs for the GroupTapped and the item you have for the GroupViewStyleSelector and GroupHeaderTemplate. The GroupContext includes the following properties:

      • IsExpanded (bool): Defines a value indicating whether the group is currently expanded (has its child items visible).
      • Items (IReadOnlyList<object>): Gets the child items of the group.
      • Key (object): Gets the specific for the group key.
      • Level (int): Gets the zero-based level (or the depth) of the group.

Example: Adding ItemTapped Event

Here is an example that demonstrates the ItemTapped event:

1. Define the RadCollectionView in XAML:

• XAML

<telerik:RadCollectionView ItemsSource="{Binding Locations}"
                           ItemTapped="OnItemTapped"
                           DisplayMemberPath="City">
    <telerik:RadCollectionView.BindingContext>
        <local:ViewModel />
    </telerik:RadCollectionView.BindingContext>
</telerik:RadCollectionView>

2. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. ItemTapped event handler:

• C#

private void OnItemTapped(object sender, Telerik.Maui.RadTappedEventArgs<object> e)
{
    var data = e.Data as DataModel;
    Application.Current.MainPage.DisplayAlert("", "You have tapped on " + data.City + " located in " + data.Country, "OK");
}

4. Create a sample DataModel:

• C#

public class DataModel : NotifyPropertyChangedBase
{
    private string continent;
    private string country;
    private string city;
    private int id;

    public string Continent
    {
        get => this.continent;
        set => this.UpdateValue(ref this.continent, value);
    }

    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 int Id
    {
        get => this.id;
        set => this.UpdateValue(ref this.id, value);
    }
}

5. Define the ViewModel class:

• C#

public class ViewModel : NotifyPropertyChangedBase
{
    public ViewModel()
    {
        this.Locations = new ObservableCollection<DataModel>
        {
            new DataModel { Continent = "Europe", Country = "Austria", City = "Graz", Id = 1 },
            new DataModel { Continent = "Europe", Country = "Austria", City = "Innsbruck", Id = 2 },
            new DataModel { Continent = "Europe", Country = "Austria", City = "Ratz", Id = 3 },
            new DataModel { Continent = "Europe", Country = "Austria", City = "Vienna", Id = 4 },
            new DataModel { Continent = "Europe", Country = "Belgium", City = "Antwerp", Id = 5 },
            new DataModel { Continent = "Europe", Country = "Belgium", City = "Charleroi", Id = 6 },
            new DataModel { Continent = "Europe", Country = "Belgium", City = "Schaffen", Id = 7 },
            new DataModel { Continent = "Europe", Country = "Denmark", City = "Copenhagen", Id = 8 },
            new DataModel { Continent = "Europe", Country = "Denmark", City = "Odense", Id = 9 },
            new DataModel { Continent = "Europe", Country = "France", City = "Nice", Id = 10 },
            new DataModel { Continent = "Europe", Country = "France", City = "Paris", Id = 11 },
            new DataModel { Continent = "Europe", Country = "Germany", City = "Baden-Baden", Id = 12 },
            new DataModel { Continent = "Europe", Country = "Germany", City = "Berlin", Id = 13 },
            new DataModel { Continent = "Europe", Country = "Germany", City = "Hamburg", Id = 14 },
            new DataModel { Continent = "Europe", Country = "Germany", City = "Munich", Id = 15 },
            new DataModel { Continent = "Europe", Country = "Germany", City = "Nuremberg", Id = 16 },
            new DataModel { Continent = "Europe", Country = "Italy", City = "Bari", Id = 17 },
            new DataModel { Continent = "Europe", Country = "Italy", City = "Rome", Id = 18 },
            new DataModel { Continent = "Europe", Country = "Netherlands", City = "Amsterdam", Id = 19 },
            new DataModel { Continent = "Europe", Country = "Netherlands", City = "Eindhoven", Id = 20 },
            new DataModel { Continent = "Europe", Country = "Netherlands", City = "Rotterdam", Id = 21 },
            new DataModel { Continent = "Europe", Country = "Portugal", City = "Lisbon", Id = 22 },
            new DataModel { Continent = "Europe", Country = "Portugal", City = "Porto", Id = 23 },
            new DataModel { Continent = "Europe", Country = "Spain", City = "Barcelona", Id = 24 },
            new DataModel { Continent = "Europe", Country = "Spain", City = "Madrid", Id = 25 },
            new DataModel { Continent = "Europe", Country = "United Kingdom", City = "London", Id = 26 },
            new DataModel { Continent = "Europe", Country = "United Kingdom", City = "Manchester", Id = 27 },
            new DataModel { Continent = "North America", Country = "United States", City = "New York", Id = 28 },
            new DataModel { Continent = "North America", Country = "United States", City = "Los Angeles", Id = 29 },
            new DataModel { Continent = "North America", Country = "United States", City = "Chicago", Id = 30 },
            new DataModel { Continent = "North America", Country = "United States", City = "Boston", Id = 31 },
            new DataModel { Continent = "North America", Country = "United States", City = "San Francisco", Id = 32 },
            new DataModel { Continent = "North America", Country = "Canada", City = "Toronto", Id = 33 },
            new DataModel { Continent = "North America", Country = "Canada", City = "Vancouver", Id = 34 },
            new DataModel { Continent = "North America", Country = "Canada", City = "Ottawa", Id = 35 },
            new DataModel { Continent = "South America", Country = "Brazil", City = "Rio de Janeiro", Id = 36 },
            new DataModel { Continent = "South America", Country = "Brazil", City = "Sao Paulo", Id = 37 },
            new DataModel { Continent = "South America", Country = "Brazil", City = "Salvador", Id = 38 },
            new DataModel { Continent = "South America", Country = "Argentina", City = "Buenos Aires", Id = 39 },
            new DataModel { Continent = "South America", Country = "Peru", City = "Lima", Id = 40 },
            new DataModel { Continent = "South America", Country = "Peru", City = "Cusco", Id = 41 },
            new DataModel { Continent = "South America", Country = "Colombia", City = "Bogota", Id = 42 },
            new DataModel { Continent = "South America", Country = "Bolivia", City = "La Paz", Id = 43 },
            new DataModel { Continent = "South America", Country = "Venezuela", City = "Caracas", Id = 44 },
            new DataModel { Continent = "South America", Country = "Chile", City = "Santiago", Id = 45 },
            new DataModel { Continent = "Asia", Country = "China", City = "Hong Kong", Id = 46 },
            new DataModel { Continent = "Asia", Country = "China", City = "Shanghai", Id = 47 },
            new DataModel { Continent = "Asia", Country = "China", City = "Macau", Id = 48 },
            new DataModel { Continent = "Asia", Country = "India", City = "Delhi", Id = 49 },
            new DataModel { Continent = "Asia", Country = "India", City = "Hyderabad", Id = 50 },
            new DataModel { Continent = "Asia", Country = "Japan", City = "Tokyo", Id = 51 },
            new DataModel { Continent = "Asia", Country = "Japan", City = "Osaka", Id = 52 },
            new DataModel { Continent = "Asia", Country = "Japan", City = "Kyoto", Id = 53 },
            new DataModel { Continent = "Asia", Country = "Vietnam", City = "Ho Chi Minh", Id = 54 },
            new DataModel { Continent = "Asia", Country = "Vietnam", City = "Hanoi", Id = 55 },
            new DataModel { Continent = "Asia", Country = "Thailand", City = "Bangkok", Id = 56 },
            new DataModel { Continent = "Asia", Country = "Thailand", City = "Phuket", Id = 57 },
            new DataModel { Continent = "Africa", Country = "Nigeria", City = "Lagos", Id = 58 },
            new DataModel { Continent = "Africa", Country = "Egypt", City = "Cairo", Id = 59 },
            new DataModel { Continent = "Africa", Country = "Algeria", City = "Algiers", Id = 60 },
            new DataModel { Continent = "Oceania", Country = "Australia", City = "Sydney", Id = 61 },
            new DataModel { Continent = "Oceania", Country = "Australia", City = "Melbourne", Id = 62 },
            new DataModel { Continent = "Oceania", Country = "Australia", City = "Canberra", Id = 63 },
            new DataModel { Continent = "Oceania", Country = "New Zealand", City = "Auckland", Id = 64 },
            new DataModel { Continent = "Oceania", Country = "New Zealand", City = "Wellington", Id = 65 },
        };
    }

    public ObservableCollection<DataModel> Locations { get; set; }
}

This is the result for ItemTapped:

For a runnable example demonstrating the CollectionView ItemTapped event or GroupItemTapped event, see the SDKBrowser Demo Application and go to CollectionView > Events category.

Scrolling Events

The CollectionView provides the Scrolled event, which is raised when scrolling is performed. The Scrolled event handler receives two parameters:

• The sender argument, which is the RadCollectionView control.
• A ScrolledEventArgs object, which provides the following properties:
  • ScrollX (double)—The X position of the finished scroll.
  • ScrollY (double)—The Y position of the finished scroll.

For a runnable example demonstrating the CollectionView Scrolled event, see the SDKBrowser Demo Application and go to CollectionView > Events category.

Selection Events

• SelectionChanged—Raised when the current selection changes. The SelectionChanged event handler receives two parameters:
  • The sender argument, which is of type object, but can be cast to the RadCollectionView type.
  • A EventArgs object, which provides information on the SelectionChanged event.