# .NET MAUI RefreshView Integration with CollectionView

You can add pull-to-refresh to the [Telerik UI for .NET MAUI CollectionView](https://www.telerik.com/maui-ui/documentation/controls/collectionview/overview) by wrapping the CollectionView in the RefreshView. Use this approach to let users reload a list of items, for example, customers, messages, or news entries, by pulling the list.

![.NET MAUI RefreshView wrapping a CollectionView with a list of customers and a refresh indicator shown above the first item](https://www.telerik.com/maui-ui/documentation/assets/620b885c4b62949c509d8188a925ae15/refreshview-integration-collectionview.gif)

## How the Integration Works

Wrap the `RadCollectionView` in the `RadRefreshView` as its content. When the user pulls the list past the pulling threshold and releases it, the RefreshView starts a refresh and executes its `Command`.

To connect the RefreshView to your view model, bind the following properties:

* `Command` (`ICommand`)—Executes the view model logic that reloads the items.
* `IsRefreshing` (`bool`)—Reflects whether a refresh is in progress. The view model sets the property to `false` when the items are loaded to end the refresh.

For more information about the command properties, see [RefreshView Commands](https://www.telerik.com/maui-ui/documentation/controls/refreshview/commands).

## Refresh the CollectionView Items

The following example demonstrates how to use the RefreshView with the CollectionView.

1. Define the RefreshView and the CollectionView in XAML:

   ```XAML
   <telerik:RadRefreshView IsRefreshing="{Binding IsRefreshing}"
                           Command="{Binding RefreshCommand}">
       <telerik:RadCollectionView ItemsSource="{Binding Items}">
           <telerik:RadCollectionView.ItemTemplate>
               <DataTemplate x:DataType="local:Customer">
                   <VerticalStackLayout Padding="10, 6">
                       <Label Text="{Binding Name}"
                              FontAttributes="Bold" />
                       <Label Text="{Binding City, StringFormat='City: {0}'}" />
                       <Label Text="{Binding Orders, StringFormat='Orders: {0}'}"
                              TextColor="Gray" />
                   </VerticalStackLayout>
               </DataTemplate>
           </telerik:RadCollectionView.ItemTemplate>
       </telerik:RadCollectionView>
   </telerik:RadRefreshView>
   ```

2. Add the `telerik` namespace:

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

3. Define the `ViewModel` with the items, the `IsRefreshing` property, and the `RefreshCommand`:

   ```C#
   public class ViewModel : NotifyPropertyChangedBase
   {
       private static readonly string[] Names = { "Andrew Fuller", "Nancy Davolio", "Janet Leverling", "Margaret Peacock", "Steven Buchanan", "Michael Suyama", "Robert King", "Laura Callahan" };
       private static readonly string[] Cities = { "Seattle", "London", "Tacoma", "Kirkland", "Redmond", "Berlin", "Madrid", "Paris" };

       private bool isRefreshing;
       private int nextId = 1;

       public ViewModel()
       {
           this.Items = new ObservableCollection<Customer>();
           for (int i = 0; i < 5; i++)
           {
               this.Items.Add(this.CreateCustomer());
           }

           this.RefreshCommand = new Command(this.ExecuteRefresh);
       }

       public ObservableCollection<Customer> Items { get; }

       public ICommand RefreshCommand { get; }

       public bool IsRefreshing
       {
           get => this.isRefreshing;
           set => this.UpdateValue(ref this.isRefreshing, value);
       }

       private async void ExecuteRefresh()
       {
           await Task.Delay(1000);
           for (int i = 0; i < 3; i++)
           {
               this.Items.Insert(0, this.CreateCustomer());
           }

           this.IsRefreshing = false;
       }

       private Customer CreateCustomer()
       {
           int id = this.nextId++;
           return new Customer
           {
               Id = id,
               Name = Names[id % Names.Length],
               City = Cities[(id * 3) % Cities.Length],
               Orders = (id * 7) % 40 + 1,
           };
       }
   }
   ```

4. Define the `Customer` business object:

   ```C#
   public class Customer
   {
       public int Id { get; set; }

       public string Name { get; set; }

       public string City { get; set; }

       public int Orders { get; set; }
   }
   ```

> tip For a runnable example with the RefreshView Integration with CollectionView scenario, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to the **RefreshView > Integration** category.

## See Also

* [RefreshView Integration with DataGrid](https://www.telerik.com/maui-ui/documentation/controls/refreshview/integration/datagrid)
* [RefreshView Commands](https://www.telerik.com/maui-ui/documentation/controls/refreshview/commands)
* [Refresh State](https://www.telerik.com/maui-ui/documentation/controls/refreshview/refresh-state)
* [CollectionView Overview](https://www.telerik.com/maui-ui/documentation/controls/collectionview/overview)