New to Telerik UI for WinUI? Download free 30-day trial

Getting Started with WinUI SideDrawer

This tutorial will walk you through the creation of a sample application that contains RadSideDrawer.

Assembly References

In order to use the RadSideDrawer control, you will need to add references to the following assemblies:

  • Telerik.WinUI.Controls

Adding RadSideDrawer to the Project

You can add a RadSideDrawer manually in XAML as demonstrated in Example 1.

You can access the RadSideDrawer control through an alias pointing to the Telerik.UI.Xaml.Controls.Primitives namespace: xmlns:telerik="using:Telerik.UI.Xaml.Controls.Primitives"

Example 1: Adding a SideDrawer in XAML

<telerik:RadSideDrawer /> 
The next step would be to create Main Content and Drawer Content:

Example 2: Set MainContent and DrawerContent

<telerik:RadSideDrawer> 
    <telerik:RadSideDrawer.MainContent> 
        <Grid Background="Bisque"> 
            <TextBlock Text="Main Content" /> 
        </Grid> 
    </telerik:RadSideDrawer.MainContent> 
    <telerik:RadSideDrawer.DrawerContent> 
        <Grid Width="300" Background="Yellow"> 
            <TextBlock Text="Drawer Content" /> 
        </Grid> 
    </telerik:RadSideDrawer.DrawerContent> 
</telerik:RadSideDrawer> 
If you run the application, you will see RadSideDrawer control, and by pressing on the button in the top-left corner, you will open the drawer on the left side.

Figure 1: This figure is generated by the code in Example 2. The SideDrawer is in an expanded state.

WinUI This figure is generated by the code in Example 2. The SideDrawer is in an expanded state.

Telerik UI for WinUI Learning Resources

See Also

In this article
Not finding the help you need?