.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 and WinUI or the dim opacity on iOS and MacCatalyst. The opacity value is different on different platforms. Review the Making SideDrawer Opacity Consistent across Platforms how-to article for more details.

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:

  

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

  

• ReverseSlideOut transition:

  

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

See Also

• Events
• Configuration
• Commands