Articles in this section
Category / Section

How to bound menu and their sub menu items using ItemsSource in SfMenu Control

1 min read

This article describes how to bound menu and their sub menu items using ItemsSource in SfMenu Control.

Use HierarchicalDataTemplate instead of DataTemplate to set ItemTemplate property of SfMenu control, because DataTemplate cannot render hierarchical data and binding the Menu and Submenu Items by using ItemsSource property.

The following code example demonstrates the same.

XAML

<syncfusion:SfMenu ItemsSource="{Binding MenuItems}" VerticalAlignment="Top" >
   <syncfusion:SfMenu.ItemTemplate>
      <primitives:HierarchicalDataTemplate ItemsSource="{Binding SubMenuItems}">
         <DataTemplate>
            <TextBlock Text="{Binding Header}"/>
         </DataTemplate>
                            <primitives:HierarchicalDataTemplate.ItemTemplate>
       <primitives:HierarchicalDataTemplate ItemsSource="{Binding SubMenuItems}">
         <DataTemplate>
            <TextBlock Text="{Binding Header}"/>
         </DataTemplate>
       </primitives:HierarchicalDataTemplate>
                    </primitives:HierarchicalDataTemplate.ItemTemplate>
     </primitives:HierarchicalDataTemplate>
   </syncfusion:SfMenu.ItemTemplate>
</syncfusion:SfMenu>

 

C#

public class MyMenuItem
    {
        public MyMenuItem()
        {
            SubMenuItems = new ObservableCollection<MyMenuItem>();
        }
 
        private string header;
 
        public string Header
        {
            get { return header;}
 
            set { header = value;}
        }
        private ObservableCollection<MyMenuItem> _subMenuItems;
 
        public ObservableCollection<MyMenuItem> SubMenuItems
        {
            get { return _subMenuItems; }
 
            set { _subMenuItems = value; }
        }
    }
    public class MyMenuModel
    {
        private List<MyMenuItem> _menuItems;
 
        public List<MyMenuItem> MenuItems
        {
            get { return _menuItems; }
 
            set { _menuItems = value; }
        }
 
        public MyMenuModel()
        {
            MenuItems = new List<MyMenuItem>();
 
            MyMenuItem file = new MyMenuItem() { Header = "File" };
            MyMenuItem edit = new MyMenuItem() { Header = "Edit" };
            MyMenuItem view = new MyMenuItem() { Header = "View" };
            MyMenuItem project = new MyMenuItem() { Header = "Project" };
            MyMenuItem build = new MyMenuItem() { Header = "Build" };
            MyMenuItem New = new MyMenuItem() { Header = "New" };
            MyMenuItem open = new MyMenuItem() { Header = "Open" };
            MyMenuItem add = new MyMenuItem() { Header = "Add" };
            MyMenuItem close = new MyMenuItem() { Header = "Close" };
            MyMenuItem _project = new MyMenuItem() { Header = "Project" };
            MyMenuItem _file = new MyMenuItem() { Header = "File" };
            MyMenuItem _open = new MyMenuItem() { Header = "Solution/Project" };
            MyMenuItem _add = new MyMenuItem() { Header = "New Project" };
            MyMenuItem cut = new MyMenuItem() { Header = "Cut" };
            MyMenuItem copy = new MyMenuItem() { Header = "Copy" };
            MyMenuItem paste = new MyMenuItem() { Header = "Paste" };
            MyMenuItem code = new MyMenuItem() { Header = "ViewCode" };
            MyMenuItem designer = new MyMenuItem() { Header = "View Designer" };
            MyMenuItem _class = new MyMenuItem() { Header = "Add Class" };
            MyMenuItem item = new MyMenuItem() { Header = "Add New Item" };
            MyMenuItem solution = new MyMenuItem() { Header = "BuildSolution" };
            MyMenuItem rebuild = new MyMenuItem() { Header = "RebuildSolution" };
            MyMenuItem deploy = new MyMenuItem() { Header = "DeploySolution" };
 
 
            MenuItems.Add(file);
            MenuItems.Add(edit);
            MenuItems.Add(view);
            MenuItems.Add(project);
            MenuItems.Add(build);
            file.SubMenuItems.Add(New);
            file.SubMenuItems.Add(open);
            file.SubMenuItems.Add(add);
            file.SubMenuItems.Add(close);
            New.SubMenuItems.Add(_project);
            New.SubMenuItems.Add(_file);
            open.SubMenuItems.Add(_open);
            add.SubMenuItems.Add(_add);
            edit.SubMenuItems.Add(cut);
            edit.SubMenuItems.Add(copy);
            edit.SubMenuItems.Add(paste);
            view.SubMenuItems.Add(code);
            view.SubMenuItems.Add(designer);
            project.SubMenuItems.Add(_class);
            project.SubMenuItems.Add(item);
            build.SubMenuItems.Add(solution);
            build.SubMenuItems.Add(rebuild);
            build.SubMenuItems.Add(deploy);
 
        }
    }

 

The Output for the above code is shown below:

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied