.NET MAUI SideDrawer Transitions

Transitions are the animation effects applied to the side drawer while it is 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 several 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>

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

  

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

  

• ReverseSlideOut transition:

  

A sample Transitions examples can be found in the SideDrawer/Features folder of the SDK Browser MAUI application.

See Also

• Getting-Started
• Events
• Configuration
• Commands