.NET MAUI RefreshView Styling

Updated on Nov 10, 2026

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 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:

For a runnable example demonstrating the RefreshView styling, see the SDKBrowser Demo Application and go to the RefreshView > Styling category.

See Also

• Indicator Type
• RefreshView Templates