Class SfNavigationDrawer

Represents a sidebar navigation view that is used to create a navigation menu for easy navigation. It provides compact and extended display modes with built-in navigation view items with the ability to switch between modes based on the available size of the control.

Inheritance

System.Object

SfNavigationDrawer

Namespace: Syncfusion.UI.Xaml.NavigationDrawer

Assembly: Syncfusion.SfNavigationDrawer.WPF.dll

Syntax

public class SfNavigationDrawer : Control

Remarks

Contains two panes of which one is the sidebar pane that contains the navigation items. The other is the main content pane that displays the actual content of the application.

Examples

Below example shows how to use the navigation drawer control.

MainWindow.xaml

<syncfusion:SfNavigationDrawer x:Name="navigationDrawer" DisplayMode="Compact">
    <syncfusion:NavigationItem Header="Inbox">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Drafts" >
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Sent">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
</syncfusion:SfNavigationDrawer>

Constructors

SfNavigationDrawer()

Initializes a new instance of the SfNavigationDrawer class.

Declaration

public SfNavigationDrawer()

Fields

AnimationDurationProperty

Identifies the AnimationDuration dependency property.

Declaration

public static readonly DependencyProperty AnimationDurationProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the AnimationDuration dependency property.

AutoChangeDisplayModeProperty

Identifies the AutoChangeDisplayMode dependency property.

Declaration

public static readonly DependencyProperty AutoChangeDisplayModeProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the AutoChangeDisplayMode dependency property.

Remarks

true if auto change display mode enabled; otherwise, false.The default value is false.

CompactModeWidthProperty

Identifies the CompactModeWidth dependency property.

Declaration

public static readonly DependencyProperty CompactModeWidthProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the CompactModeWidth dependency property.

Remarks

This property specifies the width of the drawer when DisplayMode is Compact and IsOpen is false.

ContentViewProperty

Identifies the ContentView dependency property.

Declaration

public static readonly DependencyProperty ContentViewProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ContentView dependency property.

DisplayMemberPathProperty

Identifies the DisplayMemberPath dependency property.

Declaration

public static readonly DependencyProperty DisplayMemberPathProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DisplayMemberPath dependency property.

DisplayModeProperty

Identifies the DisplayMode dependency property.

Declaration

public static readonly DependencyProperty DisplayModeProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DisplayMode dependency property.

Remarks

One of the DisplayMode enumeration that specifies which display mode will appears in the view. The default mode is Default.

DrawerBackgroundProperty

Identifies the DrawerBackground dependency property.

Declaration

public static readonly DependencyProperty DrawerBackgroundProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DrawerBackground dependency property.

DrawerContentViewProperty

Identifies the DrawerContentView dependency property.

Declaration

public static readonly DependencyProperty DrawerContentViewProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DrawerContentView dependency property.

DrawerFooterViewProperty

Identifies the DrawerFooterView dependency property.

Declaration

public static readonly DependencyProperty DrawerFooterViewProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DrawerFooterView dependency property.

DrawerHeaderViewProperty

Identifies the DrawerHeaderView dependency property.

Declaration

public static readonly DependencyProperty DrawerHeaderViewProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DrawerHeaderView dependency property.

DrawerHeightProperty

Identifies the DrawerHeight dependency property.

Declaration

public static readonly DependencyProperty DrawerHeightProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DrawerHeight dependency property.

DrawerWidthProperty

Identifies the DrawerWidth dependency property.

Declaration

public static readonly DependencyProperty DrawerWidthProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the DrawerWidth dependency property.

EnableSwipeGestureProperty

Identifies the EnableSwipeGesture dependency property.

Declaration

public static readonly DependencyProperty EnableSwipeGestureProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the EnableSwipeGesture dependency property.

ExpandedModeThresholdWidthProperty

Identifies the ExpandedModeThresholdWidth dependency property.

Declaration

public static readonly DependencyProperty ExpandedModeThresholdWidthProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ExpandedModeThresholdWidth dependency property.

Remarks

Expanded mode threshold width will be increased or decreased based on corresponding field value

ExpandedModeWidthProperty

Identifies the ExpandedModeWidth dependency property.

Declaration

public static readonly DependencyProperty ExpandedModeWidthProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ExpandedModeWidth dependency property.

Remarks

This property specifies the width of the drawer when DisplayMode is Expanded and IsOpen is true.

FooterHeightProperty

Identifies the FooterHeight dependency property.

Declaration

public static readonly DependencyProperty FooterHeightProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the FooterHeight dependency property.

FooterItemsProperty

Identifies the FooterItems dependency property.

Declaration

public static readonly DependencyProperty FooterItemsProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the FooterItems dependency property.

HeaderHeightProperty

Identifies the HeaderHeight dependency property.

Declaration

public static readonly DependencyProperty HeaderHeightProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the HeaderHeight dependency property.

IconMemberPathProperty

Identifies the IconMemberPath dependency property.

Declaration

public static readonly DependencyProperty IconMemberPathProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the IconMemberPath dependency property.

IndentationWidthProperty

Identifies the IndentationWidth dependency property.

Declaration

public static readonly DependencyProperty IndentationWidthProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the IndentationWidth dependency property.

IsOpenProperty

Identifies the IsOpen dependency property.

Declaration

public static readonly DependencyProperty IsOpenProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the IsOpen dependency property.

IsToggleButtonVisibleProperty

Identifies the IsToggleButtonVisible dependency property.

Declaration

public static readonly DependencyProperty IsToggleButtonVisibleProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the IsToggleButtonVisible dependency property.

ItemContainerStyleProperty

Identifies the ItemContainerStyle dependency property.

Declaration

public static readonly DependencyProperty ItemContainerStyleProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ItemContainerStyle dependency property.

ItemsProperty

Identifies the Items dependency property.

Declaration

public static readonly DependencyProperty ItemsProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the Items dependency property.

ItemsSourceProperty

Identifies the ItemsSource dependency property.

Declaration

public static readonly DependencyProperty ItemsSourceProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ItemsSource dependency property.

ItemTemplateProperty

Identifies the ItemTemplate dependency property.

Declaration

public static readonly DependencyProperty ItemTemplateProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ItemTemplate dependency property.

Remarks

The DataContext of the ItemTemplate is SfNavigationDrawer. The ItemsSource will be the data context for each ItemTemplate.

ItemTemplateSelectorProperty

Identifies the ItemTemplateSelector dependency property.

Declaration

public static readonly DependencyProperty ItemTemplateSelectorProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ItemTemplateSelector dependency property.

Remarks

The data context of the ItemTemplateSelector is ItemsSource.

PositionProperty

Identifies the Position dependency property.

Declaration

public static readonly DependencyProperty PositionProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the Position dependency property.

SelectedItemProperty

Identifies the SelectedItem dependency property.

Declaration

public static readonly DependencyProperty SelectedItemProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the SelectedItem dependency property.

ToggleButtonContentTemplateProperty

Identifies the ToggleButtonContentTemplate dependency property.

Declaration

public static readonly DependencyProperty ToggleButtonContentTemplateProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ToggleButtonContentTemplate dependency property.

ToggleButtonIconTemplateProperty

Identifies the ToggleButtonIconTemplate dependency property.

Declaration

public static readonly DependencyProperty ToggleButtonIconTemplateProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the ToggleButtonIconTemplate dependency property.

TouchThresholdProperty

Identifies the TouchThreshold dependency property.

Declaration

public static readonly DependencyProperty TouchThresholdProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the TouchThreshold dependency property.

TransitionProperty

Identifies the Transition dependency property.

Declaration

public static readonly DependencyProperty TransitionProperty

Field Value

Type	Description
System.Windows.DependencyProperty	The identifier for the Transition dependency property.

Properties

AnimationDuration

Gets or sets the timespan for the expand and collapse animation of the drawer.

Declaration

public TimeSpan AnimationDuration { get; set; }

Property Value

Type	Description
System.TimeSpan	The duration of the drawer animation completion. The default value is 100.

Remarks

AnimationDuration property only applicable when the DisplayMode is set as Default.

AutoChangeDisplayMode

Gets or sets a value that indicates if the drawer will auto change the display modes depending on the control width.

Declaration

public bool AutoChangeDisplayMode { get; set; }

Property Value

Type	Description
System.Boolean	true if auto change display mode enabled; otherwise, false.The default value is false.

Remarks

AutoChangeDisplayMode property is applicable only for Compact or Expanded DisplayMode.

CompactModeWidth

Gets or sets the width of the narrow bar that gets rendered when the DisplayMode is Compact.

Declaration

public double CompactModeWidth { get; set; }

Property Value

Type	Description
System.Double	The width of the drawer in its compact display mode. The default value is 40 device-independent pixel (DIP).

Remarks

This property specifies the width of the drawer when DisplayMode is Compact and IsOpen is false.

ContentView

Gets or sets the value that for the main view of the NavigationDrawer where the actual application content can be placed.

Declaration

public object ContentView { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

DisplayMemberPath

Gets or sets the path to a value on the ItemsSource object to serve as the visual representation of the object for content.

Declaration

public string DisplayMemberPath { get; set; }

Property Value

Type	Description
System.String	The path to a value on the source object. This can be any path, or an XPath such as `@Name`. The default value is an empty string.

Remarks

This property is not applicable when ItemTemplate is used and DisplayMode is Default.

DisplayMode

Gets or sets a value that specifies how the drawer and content areas are being shown

Declaration

public DisplayMode DisplayMode { get; set; }

Property Value

Type	Description
DisplayMode	One of the DisplayMode enumeration that specifies which display mode will appear in the view. The default view is Default.

Remarks

When the mode is Default the control should be loaded using the DrawerHeaderView, DrawerContentView and DrawerFooterView properties. When the mode is Compact the control can be loaded using Items or along with ItemTemplate. In this mode a narrow bar will be rendered in UI and on toggled will expand the drawer as a overlay above the content. When the mode is Expanded the control can be loaded using Items or ItemsSource along with ItemTemplate. In this mode the drawer will be expanded fully in the UI, pushing the content to the right and on toggled will collapse to a compact bar UI.

Examples

Below example shows how to use the DisplayMode property.

<syncfusion:SfNavigationDrawer x:Name="navigationDrawer" DisplayMode="Expanded">
    <syncfusion:NavigationItem Header="Inbox">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Drafts" >
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Sent">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:SfNavigationDrawer.ToggleButtonContentTemplate>
        <DataTemplate>
            <Label Margin="10,5,5,5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="Header" />
        </DataTemplate>
    </syncfusion:SfNavigationDrawer.ToggleButtonContentTemplate>
    <syncfusion:SfNavigationDrawer.FooterItems>
        <syncfusion:NavigationItem Header="Footer" SelectionBackground="Transparent">
            <syncfusion:NavigationItem.Icon>
                <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
    </syncfusion:SfNavigationDrawer.FooterItems>
</syncfusion:SfNavigationDrawer>

DrawerBackground

Gets or sets the brush that changes the background of the drawer.

Declaration

public Brush DrawerBackground { get; set; }

Property Value

Type	Description
System.Windows.Media.Brush	The default value is transparent.

Remarks

DrawerBackground property is applicable for all DisplayMode.

DrawerContentView

Gets or sets the value that populates the body of the sidebar.

Declaration

public object DrawerContentView { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Remarks

DrawerContentView property is applicable only when the DisplayMode is Default.

DrawerFooterView

Gets or sets the value that populates the footer area of the sidebar.

Declaration

public object DrawerFooterView { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Remarks

DrawerFooterView property is applicable only when the DisplayMode is Default.

Declaration

public object DrawerHeaderView { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Remarks

DrawerHeaderView property is applicable only when the DisplayMode is Default.

DrawerHeight

Gets or sets the value that indicates the height of the sidebar.

Declaration

public double DrawerHeight { get; set; }

Property Value

Type	Description
System.Double	The default value is 636.

Remarks

Applicable only if the Postion is either Top or Bottom along with DisplayMode as Default. Otherwise the control height will be the DrawerHeight.

DrawerWidth

Gets or sets the value that indicates the width of the sidebar.

Declaration

public double DrawerWidth { get; set; }

Property Value

Type	Description
System.Double	The default value is 400.

Remarks

Applicable only if the Postion is either Left or Right along with DisplayMode as Default. Otherwise the control width will be the DrawerWidth.

EnableSwipeGesture

Gets or sets a value that indicates whether the drawer opens on swiping or not.

Declaration

public bool EnableSwipeGesture { get; set; }

Property Value

Type	Description
System.Boolean	true if swiping is enabled; otherwise, false.The default value is true.

Remarks

EnableSwipeGesture property only applicable for when the DisplayMode is set as Default.

ExpandedModeThresholdWidth

Gets or sets the minimum window width at which the drawer enters Expanded display mode.

Declaration

public double ExpandedModeThresholdWidth { get; set; }

Property Value

Type	Description
System.Double	The minimum window width at which the drawer enters Expanded display mode. The default value is 1008 pixels.

Remarks

Expanded mode threshold width will be increased or decreased based on corresponding field value. ExpandedModeThresholdWidth property is applicable only for Compact or Expanded DisplayMode.

ExpandedModeWidth

Gets or sets the width of the drawer when the drawer is expanded.

Declaration

public double ExpandedModeWidth { get; set; }

Property Value

Type	Description
System.Double	The width of the drawer in its expanded display mode. The default value is 250 device-independent pixel (DIP).

Remarks

This property specifies the width of the drawer when DisplayMode is Expanded and IsOpen is true.

FooterHeight

Gets or sets the value that indicates the footer height of the drawer view.

Declaration

public double FooterHeight { get; set; }

Property Value

Type	Description
System.Double	The default value is zero.

Remarks

FooterHeight property is only effective for Default DisplayMode.

FooterItems

Gets or sets the collection of NavigationItem to be displayed in the footer area.

Declaration

public NavigationItemsCollection FooterItems { get; set; }

Property Value

Type	Description
NavigationItemsCollection	The collection that is used to generate the content of the footer menu. The default value is null.

Remarks

FooterItems property is applicable only for Compact and Expanded DisplayMode.

Examples

Below example shows, how to use FooterItems and populate footer items.

<syncfusion:SfNavigationDrawer.FooterItems>
    <syncfusion:NavigationItem Header="Footer" SelectionBackground="Transparent">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
</syncfusion:SfNavigationDrawer.FooterItems>

HeaderHeight

Gets or sets the value that indicates the header height of the drawer view.

Declaration

public double HeaderHeight { get; set; }

Property Value

Type	Description
System.Double	The default value is zero.

Remarks

DrawerHeaderHeight property is applicable only for Default DisplayMode.

IconMemberPath

Gets or sets the path to a value on the ItemsSource object to serve as the visual representation of the object for icon.

Declaration

public string IconMemberPath { get; set; }

Property Value

Type	Description
System.String	The path to a value on the source object. This can be any path, or an XPath such as `@Name`. The default value is an empty string.

Remarks

This property is not applicable when ItemTemplate is used.

IndentationWidth

Gets or sets the indentation for the left space of the child items.

Declaration

public double IndentationWidth { get; set; }

Property Value

Type	Description
System.Double	The value of the left position for the child items. The default value is 20 pixels.

Remarks

IndentationWidth property is applicable only for Compact and Expanded DisplayMode.

IsOpen

Gets or sets a value indicating whether the drawer opening state of SfNavigationDrawer

Declaration

public bool IsOpen { get; set; }

Property Value

Type	Description
System.Boolean	true if drawer is in open state, otherwise false. The default value is false.

Remarks

IsOpen property is applicable for all DisplayMode.

IsToggleButtonVisible

Gets or sets a value that indicates whether the toggle button is shown or not.

Declaration

public bool IsToggleButtonVisible { get; set; }

Property Value

Type	Description
System.Boolean	true if the toggle button is visible; otherwise, false.The default value is true.

Remarks

IsToggleButtonVisible property is applicable only for Compact and Expanded DisplayMode.

ItemContainerStyle

Gets or sets the Style that is used when rendering the item containers for drawer items.

Declaration

public Style ItemContainerStyle { get; set; }

Property Value

Type	Description
System.Windows.Style	The default value is null.

Remarks

To define a Style for a item, specify a TargetType of NavigationItem. ItemContainerStyle property is applicable only for Compact and Expanded DisplayMode.

Examples

Below example shows how to use the ItemContainerStyle property.

<Window.DataContext>
  <local:NavigationViewModel/>
  </Window.DataContext>
 <Window.Resources>
   <Style x:Key="ItemStyle" TargetType="syncfusion:NavigationItem">
       <Setter Property = "Icon" Value="{Binding Icon}" />
       <Setter Property = "DisplayMemberPath" Value="Item" />
        <Setter Property = "ItemsSource" Value="{Binding SubItems}" />
    </Style>
  </Window.Resources>
  <syncfusion:SfNavigationDrawer
     x:Name="navigationDrawer"
     DisplayMemberPath="Item"
    DisplayMode="Expanded"
     ItemContainerStyle="{StaticResource ItemStyle}"
     ItemsSource="{Binding Items}">
  </syncfusion:SfNavigationDrawer>

Items

Gets or sets the collection of items displayed in the drawer.

Declaration

public NavigationItemsCollection Items { get; set; }

Property Value

Type	Description
NavigationItemsCollection	The collection that is used to generate the content of the drawer menu. The default value is null.

Remarks

Items property is applicable only for Compact and Expanded DisplayMode.

Examples

Below example shows how to use the Items property.

<syncfusion:SfNavigationDrawer x:Name="navigationDrawer" DisplayMode="Expanded">
    <syncfusion:NavigationItem Header="Inbox">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Drafts" >
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Sent">
        <syncfusion:NavigationItem.Icon>
            <Path Width="10" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L3.5,3 7,0" Fill="Transparent" Stretch="Fill" Stroke="#FF262626" StrokeThickness="1.5" />
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
</syncfusion:SfNavigationDrawer>

ItemsSource

Gets or sets an IEnumerable source used to generate the content of the drawer menu.

Declaration

public IEnumerable ItemsSource { get; set; }

Property Value

Type	Description
System.Collections.IEnumerable	The collection that is used to generate the content of the drawer menu. The default value is null.

Remarks

ItemsSource property is applicable only for Compact and Expanded DisplayMode.

Examples

Below example shows how to use the ItemsSource property.

ViewModel.cs
MainWindow.xaml

public class Model
{
    private string item;
    public string Item
    {
        get { return item; }
        set { item = value; }
    }

    private object icon;
    public object Icon
    {
        get { return icon; }
        set { icon = value; }
    }
}
public class ViewModel
{
    public ObservableCollection<Model> Items { get; set; }
    public ViewModel()
    {
        Items = new ObservableCollection<Model>();
        Items.Add(new Model() { Item = "Inbox",
        Icon = new Path()
        {
            Width = 10, Height = 6, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Data = Geometry.Parse("M0,0L3.5,3 7,0"), Fill = new SolidColorBrush(Colors.Transparent), Stretch = Stretch.Fill, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 1.5
        }
        });
        Items.Add(new Model() { Item = "Drafts",
        Icon = new Path()
        {
            Width = 10, Height = 6, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Data = Geometry.Parse("M0,0L3.5,3 7,0"), Fill = new SolidColorBrush(Colors.Transparent), Stretch = Stretch.Fill, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 1.5
        }
        });
        Items.Add(new Model() { Item = "Sent",
        Icon = new Path()
        {
            Width = 10, Height = 6, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Data = Geometry.Parse("M0,0L3.5,3 7,0"), Fill = new SolidColorBrush(Colors.Transparent), Stretch = Stretch.Fill, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 1.5
        }
        });
    }
}

Below example shows how to use the ItemsSource property in xaml.

    
<Window.Resources>
    <Style x:Key="ItemsStyle" TargetType="syncfusion:NavigationItem">
        <Setter Property="Icon" Value="{Binding Icon}"/>
    </Style>
</Window.Resources>
<syncfusion:SfNavigationDrawer x:Name="navigationDrawer" DisplayMode="Expanded" ItemContainerStyle="{StaticResource ItemsStyle}" ItemsSource="{Binding Items}">
    <syncfusion:SfNavigationDrawer.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Label Height="25" VerticalContentAlignment="Center" Content="{Binding Item}" FontSize="11" Foreground="Black" />
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfNavigationDrawer.ItemTemplate>
</syncfusion:SfNavigationDrawer>

ItemTemplate

Gets or sets the DataTemplate that defines the visual representation of the drawer items in NavigationDrawer.

Declaration

public DataTemplate ItemTemplate { get; set; }

Property Value

Type	Description
System.Windows.DataTemplate	The object that defines the visual representation of the drawer items. The default value is null.

Remarks

ItemTemplate property is applicable only for Compact and Expanded DisplayMode.

Examples

Below example shows how to use the ItemTemplate property.

ViewModel.cs
MainWindow.xaml

public class Model
{
    private string item;
    public string Item
    {
        get { return item; }
        set { item = value; }
    }

    private object icon;
    public object Icon
    {
        get { return icon; }
        set { icon = value; }
    }
}
public class ViewModel
{
    public ObservableCollection<Model> Items { get; set; }
    public ViewModel()
    {
        Items = new ObservableCollection<Model>();
        Items.Add(new Model() { Item = "Inbox",
        Icon = new Path()
        {
            Width = 10, Height = 6, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Data = Geometry.Parse("M0,0L3.5,3 7,0"), Fill = new SolidColorBrush(Colors.Transparent), Stretch = Stretch.Fill, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 1.5
        }
        });
        Items.Add(new Model() { Item = "Drafts",
        Icon = new Path()
        {
            Width = 10, Height = 6, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Data = Geometry.Parse("M0,0L3.5,3 7,0"), Fill = new SolidColorBrush(Colors.Transparent), Stretch = Stretch.Fill, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 1.5
        }
        });
        Items.Add(new Model() { Item = "Sent",
        Icon = new Path()
        {
            Width = 10, Height = 6, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Data = Geometry.Parse("M0,0L3.5,3 7,0"), Fill = new SolidColorBrush(Colors.Transparent), Stretch = Stretch.Fill, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 1.5
        }
        });
    }
 }

Below example shows how to use the ItemTemplate property in the xaml.

<Window.Resources>
    <Style x:Key="ItemsStyle" TargetType="syncfusion:NavigationItem">
        <Setter Property="Icon" Value="{Binding Icon}"/>
    </Style>
</Window.Resources>
<syncfusion:SfNavigationDrawer x:Name="navigationDrawer" DisplayMode="Expanded" ItemContainerStyle="{StaticResource ItemsStyle}" ItemsSource="{Binding Items}">
    <syncfusion:SfNavigationDrawer.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Label Height="25" VerticalContentAlignment="Center" Content="{Binding Item}" FontSize="11" Foreground="Black" />
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfNavigationDrawer.ItemTemplate>
</syncfusion:SfNavigationDrawer>

Declaration

public DataTemplateSelector ItemTemplateSelector { get; set; }

Property Value

Type	Description
System.Windows.Controls.DataTemplateSelector	A custom `DataTemplateSelector` object that provides logic and returns a `DataTemplate`. The default value is null.

Remarks

SfNavigationDrawer will be the data context for each NavigationItem. ItemTemplateSelector property is applicable only for Compact and Expanded DisplayMode.

Position

Gets or sets a value that indicates whether the position of drawer based on DisplayMode.

Declaration

public Position Position { get; set; }

Property Value

Type	Description
Position	One of the Position enumeration that specifies the position of drawer. The default mode is Left.

Remarks

Position property only applicable for when the DisplayMode is set as Default.

SelectedItem

Gets or sets the currently selected item in the drawer content area or returns null if the selection is empty.

Declaration

public object SelectedItem { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Remarks

The SelectedItem property is only applicable when the DisplayMode is Compact or Expanded.

ToggleButtonContentTemplate

Gets or sets the DataTemplate that defines the visual representation of the header in NavigationDrawer.

Declaration

public DataTemplate ToggleButtonContentTemplate { get; set; }

Property Value

Type	Description
System.Windows.DataTemplate	The object that defines the visual representation of the header. The default value is null.

Remarks

ToggleButtonContentTemplate property is applicable only for Compact or Expanded DisplayMode.

Examples

Below example shows, how to use ToggleButtonContentTemplate and populate a header.

<syncfusion:SfNavigationDrawer.ToggleButtonContentTemplate>
    <DataTemplate>
        <Label Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="Header" />
    </DataTemplate>
</syncfusion:SfNavigationDrawer.ToggleButtonContentTemplate>

Declaration

public DataTemplate ToggleButtonIconTemplate { get; set; }

Property Value

Type	Description
System.Windows.DataTemplate	The object that defines the visual representation of the toggle icon. The default value is null.

Remarks

ToggleButtonIconTemplate property is applicable only for Compact or Expanded DisplayMode.

Examples

Below example shows how to use the ToggleButtonIconTemplate property.

MainWindow.xaml.cs
MainWindow.xaml

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    navigationDrawer.ToggleDrawer();
}

Below example shows how to use the ToggleButtonIconTemplate property in the xaml.

<syncfusion:SfNavigationDrawer.ToggleButtonIconTemplate>
    <DataTemplate>
        <Button x:Name="hamburgerButton" BorderBrush="Transparent" Height="35" Width="40" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="16" Background="#1aa1d6" Foreground="White" Click="HamburgerButton_Click">
            <Path x:Name="HamburgerPath" Width="15" Height="14" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0.00072099878,11 L16,11 16,13 0.00072099878,13 z M0.00072099878,6 L16,6 16,8 0.00072099878,8 z M0.00072099878,1 L16,1 16,3 0.00072099878,3 z" Fill="White" Stretch="Fill"/>
        </Button>
    </DataTemplate>
</syncfusion:SfNavigationDrawer.ToggleButtonIconTemplate>

TouchThreshold

Gets or sets the value that indicates whether the threshold for easy panning from the edges.

Declaration

public double TouchThreshold { get; set; }

Property Value

Type	Description
System.Double	The threshold for easy panning from the edges. The default value is 20.

Remarks

TouchThreshold property only applicable when the DisplayMode is set as Default.

Transition

Gets or sets a value that specifies whether the transition of drawer based on DisplayMode.

Declaration

public Transition Transition { get; set; }

Property Value

Type	Description
Transition	One of the Transition enumeration that specifies the transition of drawer. The default mode is SlideOnTop.

Remarks

Transition property only applicable when the DisplayMode is set as Default.

Methods

Dispose()

Dispose method.

Declaration

public void Dispose()

OnApplyTemplate()

Initializes all the child elements of the SfNavigationDrawer control.

Declaration

public override void OnApplyTemplate()

OnPreviewKeyDown(KeyEventArgs)

KeyDown method.

Declaration

protected override void OnPreviewKeyDown(KeyEventArgs e)

Parameters

Type	Name	Description
System.Windows.Input.KeyEventArgs	e	Key event args

ToggleDrawer()

Toggles between the expand and collapse states of the drawer.

Declaration

public void ToggleDrawer()

Events

Closed

Occurs when the drawer is closed in a NavigationDrawer.

Declaration

public event SfNavigationDrawer.DrawerEventHandler Closed

Event Type

Type	Description
SfNavigationDrawer.DrawerEventHandler

Closing

Occurs when the drawer is closing in a NavigationDrawer.

Declaration

public event SfNavigationDrawer.DrawerCancelEventHandler Closing

Event Type

Type	Description
SfNavigationDrawer.DrawerCancelEventHandler

Remarks

You can customize the Opening operation through CancelEventArgs event argument.

ItemClicked

Occurs when an item was clicked.

Declaration

public event EventHandler<NavigationItemClickedEventArgs> ItemClicked

Event Type

Type	Description
System.EventHandler<NavigationItemClickedEventArgs>

ItemCollapsed

Occurs when the NavigationItem gets collapsed

Declaration

public event EventHandler<NavigationItemCollapsedEventArgs> ItemCollapsed

Event Type

Type	Description
System.EventHandler<NavigationItemCollapsedEventArgs>

ItemExpanded

Occurs when the NavigationItem gets expanded.

Declaration

public event EventHandler<NavigationItemExpandedEventArgs> ItemExpanded

Event Type

Type	Description
System.EventHandler<NavigationItemExpandedEventArgs>

Opened

Occurs when the drawer is opened in a NavigationDrawer.

Declaration

public event SfNavigationDrawer.DrawerEventHandler Opened

Event Type

Type	Description
SfNavigationDrawer.DrawerEventHandler

Opening

Declaration

public event SfNavigationDrawer.DrawerCancelEventHandler Opening

Event Type

Type	Description
SfNavigationDrawer.DrawerCancelEventHandler

WPF- v20.3.0.56

Class SfNavigationDrawer

Inheritance

Namespace: Syncfusion.UI.Xaml.NavigationDrawer

Assembly: Syncfusion.SfNavigationDrawer.WPF.dll

Syntax

Remarks

Examples

Constructors

SfNavigationDrawer()

Declaration

See Also

Fields

AnimationDurationProperty

Declaration

Field Value

AutoChangeDisplayModeProperty

Declaration

Field Value

Remarks

See Also

CompactModeWidthProperty

Declaration

Field Value

Remarks

See Also

ContentViewProperty

Declaration

Field Value

DisplayMemberPathProperty

Declaration

Field Value

See Also

DisplayModeProperty

Declaration

Field Value

Remarks

DrawerBackgroundProperty

Declaration

Field Value

DrawerContentViewProperty

Declaration

Field Value

DrawerFooterViewProperty

Declaration

Field Value

DrawerHeaderViewProperty

Declaration

Field Value

DrawerHeightProperty

Declaration

Field Value

DrawerWidthProperty

Declaration

Field Value

EnableSwipeGestureProperty

Declaration

Field Value

ExpandedModeThresholdWidthProperty

Declaration

Field Value

Remarks

See Also

ExpandedModeWidthProperty

Declaration

Field Value

Remarks

See Also

FooterHeightProperty

Declaration

Field Value

FooterItemsProperty

Declaration

Field Value

HeaderHeightProperty

Declaration

Field Value

IconMemberPathProperty

Declaration

Field Value