# .NET MAUI RefreshView Templates

The RefreshView templates let you replace the built-in indicator with custom content. Use templates when the `Circular`, `Spinner`, and `Arrow` indicators don't match your design, for example, to show a progress bar and a text message.

## Define Custom Indicator Content

To define custom indicator content, use the following properties:

* `PullingTemplate` (`DataTemplate`)—Defines the content shown while the user pulls. If the value is `null`, the RefreshView shows the built-in indicator selected by `IndicatorType`.
* `RefreshingTemplate` (`DataTemplate`)—Defines the content shown while a refresh is in progress. If the value is `null`, the RefreshView shows the built-in indicator selected by `IndicatorType`.

If the root element of a template doesn't have an explicitly set `BindingContext`, the RefreshView sets the binding context to the `RadRefreshView` instance. As a result, you can bind elements in the template to RefreshView properties, for example, to `Progress`, which returns the pull progress from `0.0` to `1.0`.

To set the size of the area that hosts the template, use the `IndicatorAreaLength` property. For more information, see [Thresholds](https://www.telerik.com/maui-ui/documentation/controls/refreshview/thresholds).

## Show a Progress Bar While Pulling

The following example demonstrates how to show a label and a progress bar while pulling and an activity indicator while refreshing.

1. Define the RefreshView with the `PullingTemplate` and `RefreshingTemplate` in XAML:

   ```XAML
   <telerik:RadRefreshView x:Name="refreshView"
                           IndicatorAreaLength="60"
                           Refreshing="OnRefreshing">
       <telerik:RadRefreshView.PullingTemplate>
           <DataTemplate>
               <telerik:RadBorder BackgroundColor="#E0F2F1">
                   <VerticalStackLayout HorizontalOptions="Center"
                                        VerticalOptions="Center"
                                        Spacing="4"
                                        BackgroundColor="#E0F2F1">
                       <Label Text="Release to refresh"
                              HorizontalOptions="Center"
                              Opacity="{Binding Progress}" />
                       <ProgressBar Progress="{Binding Progress}"
                                    WidthRequest="120"
                                    ProgressColor="#00897B" />
                   </VerticalStackLayout>
               </telerik:RadBorder>
           </DataTemplate>
       </telerik:RadRefreshView.PullingTemplate>
       <telerik:RadRefreshView.RefreshingTemplate>
           <DataTemplate>
               <telerik:RadBorder BackgroundColor="#E0F2F1">
                   <HorizontalStackLayout HorizontalOptions="Center"
                                          VerticalOptions="Center"
                                          Spacing="8">
                       <ActivityIndicator IsRunning="True"
                                          Color="#00897B"
                                          WidthRequest="24"
                                          HeightRequest="24" />
                       <Label Text="Loading..."
                              VerticalOptions="Center" />
                   </HorizontalStackLayout>
               </telerik:RadBorder>
           </DataTemplate>
       </telerik:RadRefreshView.RefreshingTemplate>
       <VerticalStackLayout Padding="20"
                            Spacing="10"
                            BackgroundColor="#EEEEEE">
           <Label Text="Pull down to see the custom PullingTemplate and RefreshingTemplate." />
           <Label x:Name="statusLabel"
                  Text="Not refreshed yet" />
       </VerticalStackLayout>
   </telerik:RadRefreshView>
   ```

2. Add the `telerik` namespace:

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

3. Handle the `Refreshing` event and end the refresh when the data is loaded:

   ```C#

   private async void OnRefreshing(object sender, EventArgs e)
   {
       await Task.Delay(2000);
       this.refreshCount++;
       this.statusLabel.Text = $"Refreshed {this.refreshCount} time(s)";
       this.refreshView.IsRefreshing = false;
   }
   ```

The following image shows the result:

![.NET MAUI RefreshView with a custom pulling template that shows a Release to refresh label above a teal progress bar bound to the pull progress](https://www.telerik.com/maui-ui/documentation/assets/9d06eeb43dbc40d2af8023036290a42f/refreshview-templates.gif)

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

## See Also

* [Indicator Type](https://www.telerik.com/maui-ui/documentation/controls/refreshview/indicator-type)
* [Styling the RefreshView](https://www.telerik.com/maui-ui/documentation/controls/refreshview/styling)
* [Thresholds](https://www.telerik.com/maui-ui/documentation/controls/refreshview/thresholds)