Skip to main content

DrawerPage Class

A page that can show / hide a drawer panel with the application’s main navigation menu and information a user may require (for example, account information).

Namespace: DevExpress.XamarinForms.Navigation

Assembly: DevExpress.XamarinForms.Navigation.dll

NuGet Package: DevExpress.XamarinForms.Navigation

Declaration

public class DrawerPage :
    Page,
    IDrawerControl

Example

This example demonstrates how to adjust the DrawerPage’s basic settings. DrawerPage Example

<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"
    xmlns:view="clr-namespace:DrawerPageExample.Views"
    x:Class="DrawerPageExample.MainPage"
    DrawerPosition="Left"
    DrawerBehavior="SlideOnTop"
    DrawerWidth="180"
    IsScrimEnabled="false"
    IsDrawerShadowVisible="true"
    DrawerShadowHeight="5"
    DrawerShadowRadius="10"
    DrawerShadowColor="#808080">
    <dxn:DrawerPage.BindingContext>
        <viewmodel:MainViewModel/>
    </dxn:DrawerPage.BindingContext>
    <dxn:DrawerView.DrawerHeaderContent>
        <view:DrawerHeader/>
    </dxn:DrawerView.DrawerHeaderContent>
    <dxn:DrawerView.DrawerFooterContent>
        <view:DrawerFooter/>
    </dxn:DrawerView.DrawerFooterContent>
    <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 table lists the DrawerPage object’s properties used in this example to configure the drawer panel and content area:

Property

Description

Drawer Content

DrawerContent

Gets or sets a view the DrawerPage displays as the drawer content.

DrawerHeaderContent

Gets or sets a view the DrawerPage displays as the drawer header.

DrawerFooterContent

Gets or sets a view the DrawerPage displays as the drawer footer.

Drawer Position and Behavior

DrawerPosition

Gets or sets the screen edge to which the drawer is anchored.

DrawerBehavior

Gets or sets how the drawer behaves on opening / closing.

Drawer Size

DrawerWidth

Gets or sets the width of the drawer when DrawerPosition is set to Left or Right.

Drawer Shadow

IsDrawerShadowVisible

Gets or sets whether the drawer casts a shadow.

DrawerShadowColor

Gets or sets the color of the drawer shadow.

DrawerShadowHeight

Gets or sets the height of the shadow the drawer casts.

DrawerShadowRadius

Gets or sets the blur radius of the shadow the drawer casts.

Content Area and Scrim

MainContent

Gets or sets a page that the DrawerPage displays in the content area.

IsScrimEnabled

Gets or sets whether the scrim is shown when the drawer is opened.

Inheritance

Object
DrawerPage
See Also