# .NET MAUI RefreshView Transition Mode

The RefreshView transition mode defines how the indicator and the content move while the user pulls. Choose a transition mode to match the native pull-to-refresh behavior of a platform or to keep the same behavior on all platforms.

## Select the Transition Mode

To select the transition mode, set the `TransitionMode` property of type `Telerik.Maui.Controls.RefreshView.RefreshViewTransitionMode`. The property accepts the following values:

* `Push`—Moves the content with the pull while the indicator slides in from the selected edge. Default on Windows.
* `Slide`—Slides the indicator over the content. The content doesn't move. Default on Android.
* `Reveal`—Keeps the indicator at the selected edge and progressively reveals the indicator as the content moves with the pull. Default on iOS and MacCatalyst.

The selected edge is defined by the [Pull Direction](https://www.telerik.com/maui-ui/documentation/controls/refreshview/pull-direction) of the RefreshView.

## Set the Transition Mode

The following example demonstrates how to set the `TransitionMode` property of the RefreshView.

1. Define the RefreshView in XAML:

   ```XAML
   <telerik:RadRefreshView x:Name="refreshView"
                           TransitionMode="Push"
                           Refreshing="OnRefreshing">
       <VerticalStackLayout Padding="20"
                            Spacing="10"
                            BackgroundColor="#EEEEEE">
           <Label Text="TransitionMode:"
                  VerticalOptions="Center" />
           <telerik:RadComboBox x:Name="transitionModeComboBox"
                                HorizontalOptions="Start"
                                WidthRequest="160" />
           <Label Text="Pull down to see how the indicator and the content move." />
           <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(1500);
       this.refreshCount++;
       this.statusLabel.Text = $"Refreshed {this.refreshCount} time(s) using {this.refreshView.TransitionMode} transition";
       this.refreshView.IsRefreshing = false;
   }
   ```

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

## See Also

* [Pull Direction](https://www.telerik.com/maui-ui/documentation/controls/refreshview/pull-direction)
* [Thresholds](https://www.telerik.com/maui-ui/documentation/controls/refreshview/thresholds)
* [Indicator Type](https://www.telerik.com/maui-ui/documentation/controls/refreshview/indicator-type)