New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI SideDrawer Transitions

Transitions are the animation effects applied to the side drawer while being opened and closed. The following properties are related to the SideDrawer transition:

  • DrawerTransitionDuration(double)—Defines the duration of the chosen transition.
  • DrawerTransitionType(enum of type Telerik.Maui.Controls.SideDrawerTransitionType)—Defines the transition of the component. This property can be set to one of the following values:

    • Fade, Push, Reveal, ReverseSlideOut, ScaleUp, SlideAling, SlideInOnTop, Custom
  • DrawerTransitionFadeOpacity(double)—Defines the opacity of the fade layer of the component. This controls the fade layer opacity on Android or the dim opacity on iOS.

Built-in Transitions

The SideDrawer exposes predefined transitions. Set the transition type by using the DrawerTransitionType property of the SideDrawer.

DrawerTransitionType is enumeration and exposes the following members:

  • Push (the default one)
  • Fade
  • Reveal
  • ReverseSlideOut
  • ScaleUp
  • SlideAlong
  • SlideInOnTop
  • Custom

Here is a sample snippet on how you can set DrawerTransitionType property of RadSideDrawer:

<telerik:RadSideDrawer x:Name="drawer" 
                       Grid.Row="1" 
                       DrawerLength="250">
    <telerik:RadSideDrawer.MainContent>
        <StackLayout Orientation="Vertical">
            <Label Text="Transition Type:" />
            <telerik:RadListPicker WidthRequest="300" 
                                   x:Name="picker" BindingContext="{x:Reference drawer }" 
                                   SelectedItem="{Binding DrawerTransitionType, Mode=TwoWay}" />
        </StackLayout>
    </telerik:RadSideDrawer.MainContent>
    <telerik:RadSideDrawer.DrawerContent>
        <Grid WidthRequest="220">
            <ListView x:Name="drawerList" />
        </Grid>
    </telerik:RadSideDrawer.DrawerContent>
</telerik:RadSideDrawer>

Use the following namespace:

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

In addition to the transition type, you can also control the transition duration and opacity value through DrawerTransitionDuration and DrawerTransitionFadeOpacity properties, respectively. For more details on this go to Configuration topic.

Examples

Check below some of the predefined transitions of RadSideDrawer.

  • Default Push transition:

    .NET MAUI SideDrawer Push transition

  • SlideInOnTop transition - the drawer goes over the main content:

    .NET MAUI SideDrawer Slide In On Top transition

  • ReverseSlideOut transition:

    .NET MAUI SideDrawer Reverse Slide Out

For a runnable example with the SideDrawer Transitions scenario, see the SDKBrowser Demo Application and go to SideDrawer > Features.

See Also

In this article