menu

WPF

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfNavigationDrawer - API Reference

    Show / Hide Table of Contents

    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()
    See Also
    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.

    See Also
    ExpandedModeThresholdWidth

    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.

    See Also
    ExpandedModeWidth

    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.

    See Also
    ItemsSource

    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

    See Also
    AutoChangeDisplayMode

    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.

    See Also
    CompactModeWidth

    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.

    See Also
    ItemsSource

    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.

    See Also
    ToggleButtonIconTemplate

    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.

    See Also
    NavigationItem

    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.

    See Also
    DisplayMemberPath

    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.

    See Also
    ItemTemplateSelector

    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.

    See Also
    ItemTemplate

    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.

    See Also
    ToggleButtonIconTemplate

    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.

    See Also
    ToggleButtonContentTemplate

    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.

    See Also
    DrawerWidth

    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.

    See Also
    ExpandedModeThresholdWidth

    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.

    See Also
    ExpandedModeWidth

    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.

    See Also
    ItemsSource

    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.

    See Also
    DrawerWidth
    DrawerHeight

    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.

    See Also
    DrawerHeaderView

    DrawerHeaderView

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

    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.

    See Also
    DrawerFooterView

    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.

    See Also
    DrawerHeight

    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.

    See Also
    AutoChangeDisplayMode

    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.

    See Also
    CompactModeWidth

    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.

    See Also
    HeaderHeight

    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.

    See Also
    FooterHeight

    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.

    See Also
    ItemsSource

    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.

    See Also
    ToggleButtonIconTemplate

    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>
    See Also
    NavigationItem

    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>
    See Also
    DisplayMemberPath

    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>
    See Also
    ItemTemplateSelector

    ItemTemplateSelector

    Gets or sets the custom logic for choosing a template used to display inside the drawer.

    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.

    See Also
    ItemTemplate

    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.

    See Also
    DisplayMode

    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>
    See Also
    ToggleButtonIconTemplate

    ToggleButtonIconTemplate

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

    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>
    See Also
    ToggleButtonContentTemplate

    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.

    See Also
    EnableSwipeGesture

    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.

    See Also
    DisplayMode

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved