Customizing Data Templates in WPF MenuAdv

This repository demonstrates how to customize menu item appearance in the Syncfusion WPF MenuAdv control using data binding, MVVM, and HierarchicalDataTemplate.

The sample shows how to create a multi‑level menu structure and apply a custom visual layout—including icons and styled text—to each menu item.

---

Overview

The Syncfusion WPF MenuAdv control supports hierarchical menus with full data‑binding and templating support. By using HierarchicalDataTemplate, developers can control how each menu item and submenu is rendered.

In this example:

• Menu data is generated in a ViewModel
• Each menu item supports child items
• Menu item visuals are customized using a data template
• Icons and formatted text are displayed for every menu entry

---

What This Sample Demonstrates

• Creating hierarchical menu structures using MVVM
• Binding menu items through ItemsSource
• Using HierarchicalDataTemplate for nested menus
• Customizing MenuAdv item layout with images and text
• Displaying multi‑level menus without code‑behind logic

---

Data Model

MenuBarModel

public class MenuBarModel : NotificationObject
{
    private string header;
    private string gestureText;

    public MenuBarModel()
    {
        MenuItems = new ObservableCollection<MenuBarModel>();
    }

    public ObservableCollection<MenuBarModel> MenuItems { get; set; }

    public string Header
    {
        get => header;
        set { header = value; RaisePropertyChanged(nameof(Header)); }
    }

    public string GestureText
    {
        get => gestureText;
        set { gestureText = value; RaisePropertyChanged(nameof(GestureText)); }
    }
}

---

ViewModel

The ViewModel dynamically constructs a multi‑level menu hierarchy.

class ViewModel
{
    public ObservableCollection<MenuBarModel> MenuModel { get; set; }
        = new ObservableCollection<MenuBarModel>();

    public ViewModel()
    {
        PopulateMenu();
    }

    private void PopulateMenu()
    {
        MenuBarModel product = new MenuBarModel() { Header = "Products" };
        PopulateSubSubItems(product);
        MenuModel.Add(product);
    }

    private void PopulateSubSubItems(MenuBarModel item)
    {
        MenuBarModel wpf = new MenuBarModel() { Header = "WPF" };
        MenuBarModel silverlight = new MenuBarModel() { Header = "SilverLight" };

        wpf.MenuItems.Add(new MenuBarModel() { Header = "Tools" });
        wpf.MenuItems.Add(new MenuBarModel() { Header = "Chart" });
        wpf.MenuItems.Add(new MenuBarModel() { Header = "Grid" });
        wpf.MenuItems.Add(new MenuBarModel() { Header = "Diagram" });
        wpf.MenuItems.Add(new MenuBarModel() { Header = "Gauge" });
        wpf.MenuItems.Add(new MenuBarModel() { Header = "Schedule" });
        wpf.MenuItems.Add(new MenuBarModel() { Header = "Edit" });

        MenuBarModel ui = new MenuBarModel() { Header = "User Interface" };
        ui.MenuItems.Add(wpf);
        ui.MenuItems.Add(silverlight);

        item.MenuItems.Add(new MenuBarModel() { Header = "Business Intelligence" });
        item.MenuItems.Add(ui);
        item.MenuItems.Add(new MenuBarModel() { Header = "Reporting" });
    }
}

---

XAML Implementation

<syncfusion:MenuAdv
    ItemsSource="{Binding MenuModel}"
    Orientation="Horizontal"
    Height="25">

    <syncfusion:MenuAdv.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding MenuItems}">
            <StackPanel Orientation="Horizontal">
                <Image
                    Width="15"
                    Height="15"
                    Source="App.ico" />
                <TextBlock
                    Text="{Binding Header}"
                    FontStyle="Italic"
                    FontWeight="Bold"
                    Margin="5,0,0,0" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </syncfusion:MenuAdv.ItemTemplate>

</syncfusion:MenuAdv>

---

Use Cases

This approach is useful for:

• Product or feature menus
• Application navigation bars
• Enterprise dashboards
• Modern UI designs requiring branded menus

---

Output