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

Getting Started with WinUI SideDrawer

Updated on Mar 26, 2026

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
Telerik.Licensing.Runtime.dll

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

XAML

<telerik:RadSideDrawer />

The next step would be to create Main Content and Drawer Content:

Example 2: Set MainContent and DrawerContent

XAML

<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.