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

Getting Started

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.

See Also

In this article
Not finding the help you need?