# .NET MAUI RefreshView Styling

The RefreshView lets you style the built-in indicator to match the colors and sizes of your app. To fully replace the indicator, use [RefreshView Templates](https://www.telerik.com/maui-ui/documentation/controls/refreshview/templates) instead.

## Apply an Indicator Style

To style the built-in indicator, use the following properties of the `RadRefreshView`:

* `IndicatorStyle` (`Style`)—Specifies the style applied to the built-in indicator selected by `IndicatorType`. The `TargetType` of the style must be compatible with the selected indicator. Otherwise, the RefreshView ignores the style. `IndicatorStyle` doesn't change the indicator type.

The following table lists the indicator class that matches each `IndicatorType` value:

| `IndicatorType` | Style `TargetType`                        |
| --------------- | ----------------------------------------- |
| `Circular`      | `telerik:RadCircularRefreshViewIndicator` |
| `Spinner`       | `telerik:RadSpinnerRefreshViewIndicator`  |
| `Arrow`         | `telerik:RadArrowRefreshViewIndicator`    |

## Indicator Styling Properties

All built-in indicators expose the following properties:

* `Color` (`Color`)—Specifies the color of the indicator.
* `WidthRequest` (`double`)—Specifies the requested width of the indicator.
* `HeightRequest` (`double`)—Specifies the requested height of the indicator.

The `RadCircularRefreshViewIndicator` exposes the following additional properties:

* `CircleBackgroundColor` (`Color`)—Specifies the background color of the circle.
* `CircleRadius` (`double`)—Specifies the radius of the circle.
* `StrokeThickness` (`double`)—Specifies the thickness of the progress arc.
* `CircleShadowColor` (`Color`)—Specifies the color of the circle shadow.
* `CircleShadowOpacity` (`double`)—Specifies the opacity of the circle shadow.
* `CircleShadowOffset` (`Size`)—Specifies the offset of the circle shadow.
* `CircleShadowBlurRadius` (`double`)—Specifies the blur radius of the circle shadow.

## Style the Built-In Indicators

The following example demonstrates how to apply a custom style to each built-in indicator of the `RadRefreshView`.

1. Add the styles to the page resources:

   ```XAML
   <Style x:Key="CircularIndicatorStyle" TargetType="telerik:RadCircularRefreshViewIndicator">
       <Setter Property="Color" Value="#00897B" />
       <Setter Property="CircleBackgroundColor" Value="#E0F2F1" />
       <Setter Property="CircleRadius" Value="22" />
       <Setter Property="StrokeThickness" Value="4" />
       <Setter Property="CircleShadowColor" Value="#00897B" />
       <Setter Property="CircleShadowOpacity" Value="0.4" />
       <Setter Property="CircleShadowOffset" Value="0,3" />
       <Setter Property="CircleShadowBlurRadius" Value="6" />
   </Style>
   ```

   ```XAML
   <Style x:Key="SpinnerIndicatorStyle" TargetType="telerik:RadSpinnerRefreshViewIndicator">
       <Setter Property="Color" Value="#8660C5" />
       <Setter Property="WidthRequest" Value="36" />
       <Setter Property="HeightRequest" Value="36" />
   </Style>
   ```

   ```XAML
   <Style x:Key="ArrowIndicatorStyle" TargetType="telerik:RadArrowRefreshViewIndicator">
       <Setter Property="Color" Value="#E65100" />
       <Setter Property="WidthRequest" Value="48" />
       <Setter Property="HeightRequest" Value="48" />
   </Style>
   ```

2. Define the RefreshView controls and set the `IndicatorStyle` property:

   ```XAML
   <telerik:RadRefreshView x:Name="circularRefreshView"
                           IndicatorType="Circular"
                           BackgroundColor="#EEEEEE"
                           IndicatorStyle="{StaticResource CircularIndicatorStyle}"
                           Refreshing="OnRefreshing">
       <Label Text="Circular indicator - pull down"
              Padding="20" />
   </telerik:RadRefreshView>
   ```

   ```XAML
   <telerik:RadRefreshView x:Name="spinnerRefreshView"
                           Grid.Row="1"
                           IndicatorType="Spinner"
                           BackgroundColor="#EEEEEE"
                           IndicatorStyle="{StaticResource SpinnerIndicatorStyle}"
                           Refreshing="OnRefreshing">
       <Label Text="Spinner indicator - pull down"
              Padding="20" />
   </telerik:RadRefreshView>
   ```

   ```XAML
   <telerik:RadRefreshView x:Name="arrowRefreshView"
                           Grid.Row="2"
                           IndicatorType="Arrow"
                           BackgroundColor="#EEEEEE"
                           IndicatorStyle="{StaticResource ArrowIndicatorStyle}"
                           Refreshing="OnRefreshing">
       <Label Text="Arrow indicator - pull down"
              Padding="20" />
   </telerik:RadRefreshView>
   ```

3. Add the `telerik` namespace:

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

4. 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(1000);
       ((RadRefreshView)sender).IsRefreshing = false;
   }
   ```

The following image shows the result:

![.NET MAUI RefreshView with three styled indicators: a teal circular indicator with a light teal circle, a purple spinner, and an orange arrow](https://www.telerik.com/maui-ui/documentation/assets/c4f33914f961e356f31141fcbfb64acd/refreshview-styling.png)

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

## See Also

* [Indicator Type](https://www.telerik.com/maui-ui/documentation/controls/refreshview/indicator-type)
* [RefreshView Templates](https://www.telerik.com/maui-ui/documentation/controls/refreshview/templates)