This guide covers details for DrawerControl specifically. If you are just getting started with the Uno Material Toolkit Library, please see our general getting started page to make sure you have the correct setup in place.


DrawerControl is a container with two views; one view for the main content, and another view that can be revealed with a swipe gesture.


Due to the lack of clipping, this control should be used as a full window-sized control or, at least, the side where the drawer opens from should be placed on the edge of the screen.


public partial class DrawerControl : ContentControl







Constructor Description
DrawerControl() Initializes a new instance of the DrawerControl class.


Property Type Description
DrawerBackground Brush Gets or sets the background of the drawer.
DrawerContent object Gets or sets the drawer content.
DrawerDepth double? Get or sets the depth (width or height depending on the OpenDirection) of the drawer.
note: The default value is null which enables fully stretched or fit the content (see: FitToDrawerContent). Alternatively, a concrete value can be set for a fixed depth.
EdgeSwipeDetectionLength double? Gets or sets the length (width or height depending on the OpenDirection) of the area allowed for opening swipe gesture.
note: By default, this value is null allowing the drawer to be swiped open from anywhere. Setting a positive value will enforce the edge swipe for opening.
FitToDrawerContent bool=true Get or sets a value that indicates whether the drawer will fit to content and aligned to the edge or stretch to fill the control when DrawerDepth is null.
IsGestureEnabled bool=true Get or sets a value that indicates whether the user can interact with the control using gesture.
IsLightDismissEnabled bool=true Gets or sets a value that indicates whether the drawer can be light-dismissed.
IsOpen bool Gets or sets a value that specifies whether the drawer is open.
LightDismissOverlayBackground Brush Gets or sets the brush used to paint the light dismiss overlay.
OpenDirection DrawerOpenDirection=Right Gets or sets the direction in which the drawer opens toward.
note: The position of the drawer when opened is the opposite of this value.


Basic usage


        <!-- Main Content ... -->
        <Frame x:Name="ContentFrame"/>
        <Grid toolkit:VisibleBoundsPadding.PaddingMask="All"
              <!-- Drawer Content... -->
              <TextBlock Text="Drawer" />

The DrawerControl can also be used to enhance NavigationView (muxc) with gesture support, using the DrawerNavigationViewStyle:


<muxc:NavigationView PaneTitle="Gesture NavView"
                     Style="{StaticResource DrawerNavigationViewStyle}">
        <muxc:NavigationViewItem Content="Home"/>
        <muxc:NavigationViewItem Content="Page 1"/>
        <muxc:NavigationViewItem Content="Page 2"/>
        <muxc:NavigationViewItem Content="Page 3"/>
        <Frame x:Name="contentFrame"/>

From the NavigationView, the properties of the DrawerControl can be accessed through the same/similarly named properties or via attached properties:

DrawerControl NavigationView
DrawerBackground utu:DrawerControlBehavior.DrawerBackground
DrawerDepth OpenPaneLength
EdgeSwipeDetectionLength utu:DrawerControlBehavior.EdgeSwipeDetectionLength
FitToDrawerContent utu:DrawerControlBehavior.FitToDrawerContent
IsGestureEnabled utu:DrawerControlBehavior.IsGestureEnabled
IsLightDismissEnabled utu:DrawerControlBehavior.IsLightDismissEnabled
IsOpen IsPaneOpen
LightDismissOverlayBackground utu:DrawerControlBehavior.LightDismissOverlayBackground
OpenDirection utu:DrawerControlBehavior.OpenDirection

Content and DrawerContent are populated with those of NavigationView.