We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Navigation Drawer

Hello, I am trying to integrate this very well documented MVVM example. Unfortunately the hierarchical variant is missing the code-behind example for the data binding.


As a WPF newbie I have a hard time translating this part to C#.
How can I bring this part in particular to C#?
Thanks for any help!

        <Style x:Key="ItemStyle" TargetType="syncfusion:NavigationItem">
            <Setter Property="Icon" Value="{Binding Icon}" />
            <Setter Property="DisplayMemberPath" Value="Item" />
            <Setter Property="ItemsSource" Value="{Binding SubItems}" />
        ItemContainerStyle="{StaticResource ItemStyle}"
        ItemsSource="{Binding Items}">

7 Replies 1 reply marked as answer

VV Vijayakumar Viswanathan Syncfusion Team October 24, 2022 07:30 AM

Hi Stefan,


Query: How can I bring a hierarchical Data Binding sample in C#(Code Behind)?


We have prepared a hierarchical data binding sample for SfNavigationDrawer in the C# (Code-Behind file).

Please get the sample from the attachment.


Please check and let us know the details.


Vijayakumar V

Attachment: Hierarchical_Data_Binding_cbb6e190.zip

Marked as answer

SD Stefan Dietl October 24, 2022 08:47 AM

VV Vijayakumar Viswanathan Syncfusion Team October 25, 2022 11:44 PM

Hi Stefan,


Thanks for the update. Please let us know if you have any further queries. We are happy to help you.



Vijayakumar V

SD Stefan Dietl October 27, 2022 02:36 PM

I have another question in relation to the above example (Populating data via MVVM). How can I set a "Command Binding" to each Item or the whole navigationDrawer for handling a "ClickCommand".

I somehow tried to create Setters to the NavigationItem.CommandProperty like You did below to the NavigationItem.DisplayMemberPathProperty - but unsuccessful. Thank You a lot! Stefan

ViewModel viewModel = new ViewModel();
this.DataContext = viewModel;

Style navigationItemStyle = new Style(typeof(NavigationItem));
navigationItemStyle.Setters.Add(new Setter(NavigationItem.DisplayMemberPathProperty, "Item"));
navigationItemStyle.Setters.Add(new Setter(NavigationItem.ItemsSourceProperty, new Binding("SubItems")));

SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
navigationDrawer.ItemsSource = viewModel.Items;
navigationDrawer.DisplayMode = DisplayMode.Expanded;
navigationDrawer.DisplayMemberPath = "Item";
navigationDrawer.IconMemberPath = "Icon";
navigationDrawer.ItemContainerStyle = navigationItemStyle;

VV Vijayakumar Viswanathan Syncfusion Team October 28, 2022 09:02 AM

Hi Stefan,


Query: How can I set a "Command Binding" to each Item or the whole NavigationDrawer for handling a "ClickCommand" in C#(Code Behind)?


We had already shared the details for Command binding to navigation items in the UG document. Please refer to the below UG link

UG link:  https://help.syncfusion.com/wpf/navigation-drawer/commands-and-events#commands


For setting the command binding in the C# file(code-behind), We have prepared a sample along with the hierarchical data binding. Please get the sample from the attachment.


Please check and let us know if you have further queries.



Vijayakumar V

Attachment: Hierarchical_CommandBinding_7b48fade.zip

SD Stefan Dietl October 28, 2022 02:07 PM

Thank You again for the amazing support!

This two lines are what I needed:

navigationItemStyle.Setters.Add(new Setter(NavigationItem.CommandProperty,viewModel.ClickCommand));
navigationItemStyle.Setters.Add(new Setter(NavigationItem.CommandParameterProperty, new Binding("Item")));

VV Vijayakumar Viswanathan Syncfusion Team October 31, 2022 06:23 AM

Hi Stefan,


We are glad to hear that the solution we provided was helpful to you. Please let us know if you require any further assistance. 



Vijayakumar V

Live Chat Icon For mobile
Up arrow icon