Getting Started with WPF Menu (MenuAdv)

20 Jun 202310 minutes to read

This section provides a quick overview for working with the Menu (MenuAdv).

Structure of the MenuAdv Control

WPF MenuAdv Structure

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the MenuAdv control in any application.

You can find more details about installing the NuGet package in a WPF application in the following link:
How to install nuget packages

Starting with v16.2.0.x, if you refer to Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer to this link to learn about registering Syncfusion license key in your WPF application to use our components.

Creating Application with MenuAdv control

In this walk through, user will create a WPF application that contains MenuAdv control.

  1. Creating project
  2. Adding control via designer
  3. Adding control manually in XAML
  4. Adding control manually in C#
  5. Creating Data Model for sample application
  6. Binding to Data

Creating project

Below section provides detailed information to create new project using MenuAdv.

Adding control via designer

The MenuAdv control can be added to the application in VisualStudio or ExpressionBlend by dragging it from Toolbox and dropping it in designer. The required assembly will be added automatically.

Through Visual Studio

The following are the steps to create the MenuAdv control using Visual Studio.

  1. Drag MenuAdv from the Visual Studio Toolbox and drop it in the designer.

    WPF Designer ThroughVisualStudio

  2. Select the MenuAdv and go to properties.

  3. Click the three dotted button given in Items property. Collection Editor window will open.

    WPF MenuAdv Collection Editor ThroughVisualStudio

  4. Using the Collection Editor, add the GroupBarItems and configure their properties.

Through Expression Blend

The MenuAdv control can also be created and configured using Expression Blend by following steps.

  1. Create a WPF project in the Expression Blend and refer the following assembly.

    • Syncfusion.Shared.Wpf
  2. Search for MenuAdv in the Toolbox.

    WPF MenuAdv Through Expression Blend

  3. Drag the MenuAdv to designer to generate an empty menu bar.

  4. To add the MenuItemAdv to the MenuAdv control, select the MenuAdv and go to Properties area.

  5. Click Items (Collection) under Common Properties.

    ItemCollection in WPF MenuAdv

  6. Once the Collection Editor opens, click Add another item. The Select Object window will open.

  7. Select MenuItemAdv by typing MenuItemAdv in the search box, and then click OK.

    Item Collection in WPF MenuAdv

  8. Configure the properties (such as header or icon) of the MenuItemAdv using the properties in the Collection Editor. This will generate the following control.

    Output in WPF MenuAdv


You can customize the appearance of the MenuItemAdv using the template-editing feature available in the Expression Blend.

Adding control manually in XAML

In order to add MenuAdv control manually in XAML, do the below steps,

  1. Add the below required assembly references to the project,

    • Syncfusion.Shared.WPF
  2. Import Syncfusion WPF schema in XAML page.

  3. Declare MenuAdv in XAML page.

  4. XAML
  5. <syncfusion:MenuAdv  Height="25" VerticalAlignment="Top">
        <syncfusion:MenuItemAdv Header="Products" />
        <syncfusion:MenuItemAdv Header="Business Intelligence" />
        <syncfusion:MenuItemAdv Header="User Interface" >
            <syncfusion:MenuItemAdv Header="WPF  ">
                <syncfusion:MenuItemAdv Header="Tools"/>
                <syncfusion:MenuItemAdv Header="Chart"/>
                <syncfusion:MenuItemAdv Header="Grid"/>
                <syncfusion:MenuItemAdv Header="Diagram"/>
                <syncfusion:MenuItemAdv Header="Gauge"/>
                <syncfusion:MenuItemAdv Header="Schedule"/>
                <syncfusion:MenuItemAdv Header="Edit"/>
            <syncfusion:MenuItemAdv Header="Silverlight "/>
            <syncfusion:MenuItemAdv Header="Reporting" />

Adding control manually in C#

In order to add MenuAdv control manually in C#, do the below steps,

  1. Add the below required assembly references to the project,

    • Syncfusion.Shared.WPF
  2. Import MenuAdv namespace Syncfusion.Windows.Shared.

  3. C#
  4. using Syncfusion.Windows.Shared;
  5. Create MenuAdv control instance and add it to the page.

  6. C#
  7. MenuAdv mAdv = new MenuAdv();
    MenuItemAdv product = new MenuItemAdv() { Header = "Products" };
    MenuItemAdv bi = new MenuItemAdv() { Header = "Business Intelligence" };
    MenuItemAdv ui = new MenuItemAdv() { Header = "User Interface" };
    MenuItemAdv wpf = new MenuItemAdv() { Header = "WPF" };
    MenuItemAdv tools = new MenuItemAdv() { Header = "Tools" };
    MenuItemAdv chart = new MenuItemAdv() { Header = "Chart" };
    MenuItemAdv grid = new MenuItemAdv() { Header = "Grid" };
    MenuItemAdv diagram = new MenuItemAdv() { Header = "Diagram" };
    MenuItemAdv gauge = new MenuItemAdv() { Header = "Gauge" };
    MenuItemAdv schedule = new MenuItemAdv() { Header = "Schedule" };
    MenuItemAdv edit = new MenuItemAdv() { Header = "Edit" };
    MenuItemAdv sl = new MenuItemAdv() { Header = "Silverlight" };
    MenuItemAdv reporting = new MenuItemAdv() { Header = "Reporting" };
    this.Content = mAdv;

View sample in GitHub

Set icon for Menu item

You can display image on left of the MenuItemAdv control by setting the image source as value for Icon property.

    <syncfusion:MenuAdv Height="25" VerticalAlignment="Top">
        <syncfusion:MenuItemAdv Header="File" >
            <syncfusion:MenuItemAdv Header="New">
                    <Image Source="NewIcon.png" Width="15" Height="15" />
            <syncfusion:MenuItemAdv Header="Open">
                    <Image Source="OpenIcon.png" Width="15" Height="15" />
            <syncfusion:MenuItemAdv Header="Save">
                    <Image Source="SaveIcon.png" Width="15" Height="15" />
            <syncfusion:MenuItemAdv Header="Close">
                    <Image Source="CloseIcon.png" Width="15" Height="15"/>
        <syncfusion:MenuItemAdv Header="Edit" />
        <syncfusion:MenuItemAdv Header="View" />
        <syncfusion:MenuItemAdv Header="Project" />
string path; path = Path.GetFullPath(@"../../" +"NewIcon.png"); MenuAdv menuAdv = new MenuAdv() { VerticalAlignment = VerticalAlignment.Top, Height = 25 }; Image image1 = new Image() { Height=15, Width = 15 }; Image image2= new Image() { Height = 15, Width = 15 }; Image image3 = new Image() { Height = 15, Width = 15 }; Image image4 = new Image() { Height = 15, Width = 15 }; MenuItemAdv File = new MenuItemAdv() { Header = "File"}; MenuItemAdv New = new MenuItemAdv() { Header = "New" }; MenuItemAdv Open = new MenuItemAdv() { Header = "Open" }; MenuItemAdv Save = new MenuItemAdv() { Header = "Save" }; MenuItemAdv Close = new MenuItemAdv() { Header = "Close" }; MenuItemAdv Edit = new MenuItemAdv() { Header = "Edit" }; MenuItemAdv View = new MenuItemAdv() { Header = "View" }; MenuItemAdv Project = new MenuItemAdv() { Header = "Project" }; image1.Source = new BitmapImage(new Uri(path)); New.Icon = image1; path = Path.GetFullPath(@"../../" + "OpenIcon.png"); image2.Source = new BitmapImage(new Uri(path)); Open.Icon = image2; path = Path.GetFullPath(@"../../" + "SaveIcon.png"); image3.Source = new BitmapImage(new Uri(path)); Save.Icon = image3; path = Path.GetFullPath(@"../../" + "CloseIcon.png"); image4.Source = new BitmapImage(new Uri(path)); Close.Icon = image4; File.Items.Add(New); File.Items.Add(Open); File.Items.Add(Save); File.Items.Add(Close); menuAdv.Items.Add(File); menuAdv.Items.Add(Edit); menuAdv.Items.Add(View); menuAdv.Items.Add(Project);

Icons in WPF MenuAdv


MenuAdv supports various built-in themes. Refer to the below links to apply themes for the MenuAdv,

Setting theme to WPF MenuAdv