.NET MAUI CollectionView Scrolling
The users can scroll vertically and horizontally through the items in the CollectionView and also scroll to a specific item from the collection.
Scrolling to an Item
The CollectionView provides the ScrollItemIntoView method that allows you to programmatically scroll to an item in the CollectionView:
-
ScrollItemIntoView(object item, bool animate = true)—Scrolls the visible area of the control so that the specified item is visible. The first parameter isitem—Specifies the item to scroll to.
The second parameter is the scrolling animation. The animation is displayed when scrolling an item into view. Disable the animation by setting the animate argument of the ScrollItemIntoView method to false. The default value is true.
The following example demonstrates how to scroll to an item in the CollectionView control by using the ScrollItemIntoView() method.
1. Create a sample DataModel:
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);
}
}
2. Define the ViewModel class:
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; }
}
3. Define the RadCollectionView in XAML:
<Grid RowDefinitions="Auto, *"
RowSpacing="20">
<telerik:RadTemplatedButton x:Name="scrollToLastItemBtn"
Content="Scroll to last item"
Clicked="OnScrollToLastItemClicked" />
<telerik:RadCollectionView x:Name="collectionView"
Grid.Row="1"
ItemsSource="{Binding Locations}"
DisplayMemberPath="City">
<telerik:RadCollectionView.BindingContext>
<local:ViewModel />
</telerik:RadCollectionView.BindingContext>
</telerik:RadCollectionView>
</Grid>
4. Add the telerik namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
5. Button clicked event handler for calling the ScrollTo method:
private void OnScrollToLastItemClicked(object sender, System.EventArgs e)
{
var item = GetItemToScrollTo();
this.collectionView.ScrollItemIntoView(item);
this.scrollToLastItemBtn.Content = "Scrolled to: " + item.City;
this.scrollToLastItemBtn.IsEnabled = false;
}
private DataModel GetItemToScrollTo()
{
return (collectionView.ItemsSource as ObservableCollection<DataModel>).LastOrDefault();
}
This is the result on WinUI:
For a runnable demo with the CollectionView Programmatic Scrolling example, see the SDKBrowser Demo Application and go to the CollectionView > Scrolling category.
Scrollbars
The CollectionView exposes an option that sets the visibility of the vertical and the horizontal scrollbars by using the VerticalScrollBarVisibility (enum of type Microsoft.Maui.ScrollBarVisibility) and HorizontalScrollBarVisibility (enum of type Microsoft.Maui.ScrollBarVisibility) properties.
The available options for the ScrollBarVisibility enumeration are:
-
Default—The visibility of the scrollbar will be the default for the platform based on the content and orientation. -
Always—The scollbar will be visible, regardless of the content or orientation. -
Never—The scrollbar will not be visible, regardless of the content or orientation.
Review the the Ensuring CollectionView Scrollbar is Always Visible on Android in a .NET MAUI application article for more details on how to display the vertical scrollbar on Android.
Events
The CollectionView exposes a Scrolled event that is invoked when scrolling is performed.
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
RadCollectionViewcontrol. - A
ScrolledEventArgsobject, 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 demo with the CollectionView Scrolled example, see the SDKBrowser Demo Application and go to the CollectionView > Events category.