Getting Started

Oct 20, 2022
8 minutes to read

This topic explains how to use a DrawerPage to add a navigation drawer to your Xamarin.Forms application.

Watch Video: Get Started with Drawer Page

Add a Drawer Page to Your Application

Note

This lesson requires an empty Xamarin.Forms solution.
DevExpress Navigation components are available for iOS and Android , and can be used in Xamarin.Forms solutions that use the .NET Standard code sharing strategy.

Add DevExpress Navigation components to your solution in one of the following ways:
Add the initialization code to your projects.
In the MainPage.xaml and MainPage.xaml.cs files of the .NET Standard project that contains the shared code, declare a namespace that contains the DrawerPage class and create a DrawerPage instance:

Prepare Models and View Models

Add the Vehicle class that represents a data object in the application:
Create the GroupedVehiclesViewModel class that defines content to be displayed within the drawer and the content area:
Create the MainViewModel class that defines the MainPage’s content:

Bind View Models to the Drawer Page

In the MainPage.xaml file:

Set the MainPage’s BindingContext property to MainViewModel.
Assign a ListView instance to the DrawerPage.DrawerContent property, and bind the list view to the view model’s VehiclesByMake property.
Assign a ContentPage with a ListView instance to the DrawerView.MainContent property, and bind the list view to an item selected in the drawer’s list.

MainPage.xaml

xaml

<dxn:DrawerPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dxn="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
    xmlns:local="clr-namespace:DrawerPageExample"
    xmlns:viewmodel="clr-namespace:DrawerPageExample.ViewModels"
    x:Class="DrawerPageExample.MainPage">
    <dxn:DrawerPage.BindingContext>
        <viewmodel:MainViewModel/>
    </dxn:DrawerPage.BindingContext>
    <dxn:DrawerPage.DrawerContent>
        <ListView x:Name="categoryList" 
                    ItemsSource="{Binding VehiclesByMake}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding GroupKey}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </dxn:DrawerPage.DrawerContent>
    <dxn:DrawerPage.MainContent>
        <ContentPage>
            <ListView BindingContext="{x:Reference categoryList}"
                        ItemsSource="{Binding SelectedItem.Vehicles}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding FullName}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ContentPage>
    </dxn:DrawerPage.MainContent>
</dxn:DrawerPage>

The following image demonstrates the current application state:

Customize the Drawer Page Appearance and Behavior

In this step, configure the drawer appearance, make it to be always visible in the landscape orientation, and add a button that toggles the drawer in the portrait orientation.

Implement the MainPage’s IsLandscapeOriented dependency property:
Implement a value converter that converts a Boolean value to a DrawerBehavior value:
Bind the DrawerPage.DrawerBehavior property to MainPage’s IsLandscapeOriented :

MainPage.xaml

xml

<dxn:DrawerPage 
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:local="clr-namespace:DrawerPageExample"
     xmlns:dxn="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
     xmlns:viewmodel="clr-namespace:DrawerPageExample.ViewModels"
     x:Class="DrawerPageExample.MainPage"
     x:Name="drawer"
     DrawerBehavior="{Binding IsLandscapeOriented, 
                     Source={x:Reference drawer}, 
                     Converter={StaticResource boolToDrawerBehaviorConverter}}">
     <dxn:DrawerPage.Resources>
         <ResourceDictionary>
             <local:BoolToDrawerBehaviorConverter x:Key="boolToDrawerBehaviorConverter"/>
         </ResourceDictionary>
     </dxn:DrawerPage.Resources>
     <!-- Other drawer page's properteis are here. -->
 </dxn:DrawerPage>

In the App.xaml.cs file, assign a NavigationPage instance to the Application.MainPage property and add the MainPage drawer page to the navigation stack (the application’s root page).
Assign a StackLayout to the NavigationPage.TitleView property. Add a button that opens and closes the drawer, and a label that displays a title text. Handle the button’s Clicked event.

MainPage.xaml

xml

<dxn:DrawerPage 
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:local="clr-namespace:DrawerPageExample"
     xmlns:dxn="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
     xmlns:viewmodel="clr-namespace:DrawerPageExample.ViewModels"
     x:Class="DrawerPageExample.MainPage"
     x:Name="drawer"
     DrawerBehavior="{Binding IsLandscapeOriented, 
                     Source={x:Reference drawer}, 
                     Converter={StaticResource boolToDrawerBehaviorConverter}}">
     <NavigationPage.TitleView>
         <StackLayout Orientation="Horizontal" VerticalOptions="Center">
             <Button Text="Menu" Clicked="Button_Clicked"/>
             <Label Text="Drawer Page Example" VerticalTextAlignment = "Center"/>
         </StackLayout>
     </NavigationPage.TitleView>
     <!-- Drawer page properties are here. -->
 </dxn:DrawerPage>

MainPage.xaml.cs

csharp

public partial class MainPage : DrawerPage {
    // ...
     void Button_Clicked(object sender, EventArgs e) {
         drawer.IsDrawerOpened = !drawer.IsDrawerOpened;
     }
}

Customize the drawer’s size (DrawerWidth), shadow (DrawerShadowHeight, DrawerShadowColor), and scrim (ScrimColor):