Build a Side Navigation UI Used in the DevExpress Demo Center

• Dec 17, 2024
• 5 minutes to read

This tutorial uses the WinForms Accordion control to create a side navigation menu in a Ribbon Form. The side navigation menu emulates the UI found in the DevExpress Demo Center, which has the following features:

• The menu is always visible
• It shifts the Ribbon UI to the right
• It groups items into categories
• It displays a search/filter box

Set Up the Layout

1. Create an AccordionControl and set the AccordionControl.Dock property to Left.

2. Set the AccordionControl.ViewType property to Standard. This value hides UI elements that allow users to expand/collapse the menu.

3. Assign the AccordionControl to the RibbonForm.NavigationControl property.

   Note

   The NavigationControl property is hidden from IntelliSense and the Properties window because it is intended for internal use. You should explicitly set the NavigationControl property in code.

   C#

   using DevExpress.XtraBars.Navigation;
   
   AccordionControl accordionControl1;
   public Form1() {
     InitializeComponent();
     // ...
     accordionControl1 = new AccordionControl();
     accordionControl1.Dock = DockStyle.Left;
     accordionControl1.OptionsHamburgerMenu.DisplayMode = AccordionControlDisplayMode.Overlay;
     accordionControl1.ViewType = AccordionControlViewType.Standard;
     this.NavigationControl = accordionControl1;
   }
   

   VB.NET

   Imports DevExpress.XtraBars.Navigation
   
   Private accordionControl1 As AccordionControl
   Public Sub New()
     InitializeComponent()
     ' ...
     accordionControl1 = New AccordionControl()
     accordionControl1.Dock = DockStyle.Left
     accordionControl1.OptionsHamburgerMenu.DisplayMode = AccordionControlDisplayMode.Overlay
     accordionControl1.ViewType = AccordionControlViewType.Standard
     Me.NavigationControl = accordionControl1
   End Sub
   

Create Menu Items

At design time, right-click the AccordionControl to add items. Use an item’s smart tag menu to specify/customize item content.

Tip

Use the Accordion Control’s Designer to build an item hierarchy of any complexity.

The following code snippet creates a group with two items:

C#

void CreateAccordionItems()
{
    // Clear items created at design time (optional)
    accordionControl1.Elements.Clear();

    AccordionControlElement group1 = new AccordionControlElement(ElementStyle.Group)
    {
        Name = "group1",
        Text = "Contacts",
        Expanded = true
    };
    AccordionControlElement item1 = new AccordionControlElement(ElementStyle.Item)
    {
        Name = "itemCustomers",
        Text = "Customers",
    };
    AccordionControlElement item2 = new AccordionControlElement(ElementStyle.Item)
    {
        Name = "itemEmployees",
        Text = "Employees"
    };
    // Assign SVG images to Accordion items based on image names in the SVG collection
    // 'svgImageCollection1' was populated with SVG images at design time
    group1.ImageOptions.SvgImage = svgImageCollection1["contacts"];
    item1.ImageOptions.SvgImage = svgImageCollection1["customers"];
    item2.ImageOptions.SvgImage = svgImageCollection1["employees"];

    group1.Elements.AddRange(new AccordionControlElement[] { item1, item2 });
    accordionControl1.Elements.Add(group1);
}

VB.NET

Private Sub CreateAccordionItems()
    ' Clear items created at design time (optional)
    accordionControl1.Elements.Clear()

    Dim group1 As New AccordionControlElement(ElementStyle.Group) With {
        .Name = "group1",
        .Text = "Contacts",
        .Expanded = True
    }
    Dim item1 As New AccordionControlElement(ElementStyle.Item) With {
        .Name = "itemCustomers",
        .Text = "Customers"
    }
    Dim item2 As New AccordionControlElement(ElementStyle.Item) With {
        .Name = "itemEmployees",
        .Text = "Employees"
    }
    ' Assign SVG images to Accordion items based on image names in the SVG collection
    ' 'svgImageCollection1' was populated with SVG images at design time
    group1.ImageOptions.SvgImage = svgImageCollection1("contacts")
    item1.ImageOptions.SvgImage = svgImageCollection1("customers")
    item2.ImageOptions.SvgImage = svgImageCollection1("employees")

    group1.Elements.AddRange(New AccordionControlElement() { item1, item2 })
    accordionControl1.Elements.Add(group1)
End Sub

Implement Static Groups

Deactivate the following settings to keep groups always expanded:

• AccordionControl.ShowGroupExpandButtons
• AccordionControl.ExpandGroupOnHeaderClick

C#

accordionControl1.ShowGroupExpandButtons = false;
accordionControl1.ExpandGroupOnHeaderClick = false;

VB.NET

accordionControl1.ShowGroupExpandButtons = False
accordionControl1.ExpandGroupOnHeaderClick = False

Display a Search/Filter Item

Set the AccordionControl.ShowFilterControl property to Always to display a search/filter item in the menu:

C#

accordionControl1.ShowFilterControl = ShowFilterControl.Always;

VB.NET

accordionControl1.ShowFilterControl = ShowFilterControl.Always

Display a Fluent Scroll Bar

The Accordion Control displays a vertical scroll bar when the number of items exceeds the visible area. Set the AccordionControl.ScrollBarMode property to Fluent. This value activates Fluent Design behavior: dynamic display, no arrow buttons, and a smooth transition.

C#

accordionControl1.ScrollBarMode = ScrollBarMode.Fluent;

VB.NET

accordionControl1.ScrollBarMode = ScrollBarMode.Fluent

Highlight the Selected Item

Enable the AccordionControl.AllowItemSelection property to highlight the clicked item:

C#

accordionControl1.AllowItemSelection = true;

VB.NET

accordionControl1.AllowItemSelection = True

Implement Page Navigation

Add Navigation Pages

Drop a NavigationFrame on the Form and set the NavigationFrame.Dock property to Fill. You can add navigation pages at design time or in code (this tutorial adds a Data Grid to each page).

C#

GridControl gridControl1;
RoundedSkinPanel rootPanel1;
NavigationFrame navFrame;

void InitNavigationFrame() {
  navFrame = new NavigationFrame();
  navFrame.Dock = DockStyle.Fill;
  this.Controls.Add(navFrame);

  NavigationPage navPageCustomers = new NavigationPage();
  NavigationPage navPageEmployees = new NavigationPage();
  navFrame.Pages.Add(navPageCustomers);
  navFrame.Pages.Add(navPageEmployees);
  // Add a Data Grid wrapped in a RoundedSkinPanel to a navigation page
  rootPanel1 = new RoundedSkinPanel() {
    Dock = DockStyle.Fill
  };
  navigationPage1.Controls.Add(rootPanel1);
  gridControl1 = new GridControl() {
    Dock = DockStyle.Fill
  };
  rootPanel1.Controls.Add(gridControl1);
}

VB.NET

Private gridControl1 As GridControl
Private rootPanel1 As RoundedSkinPanel
Private navFrame As NavigationFrame

Private Sub InitNavigationFrame()
  navFrame = New NavigationFrame()
  navFrame.Dock = DockStyle.Fill
  Me.Controls.Add(navFrame)

  Dim navPageCustomers As New NavigationPage()
  Dim navPageEmployees As New NavigationPage()
  navFrame.Pages.Add(navPageCustomers)
  navFrame.Pages.Add(navPageEmployees)
  ' Add a Data Grid wrapped in a RoundedSkinPanel to a navigation page
  rootPanel1 = New RoundedSkinPanel() With {.Dock = DockStyle.Fill}
  navigationPage1.Controls.Add(rootPanel1)
  gridControl1 = New GridControl() With {.Dock = DockStyle.Fill}
  rootPanel1.Controls.Add(gridControl1)
End Sub

Tip

This tutorial uses a RoundedSkinPanel to display navigation page controls with rounded corners. Read the following help topic for more information: Grid Lines and Rounded Corners.

Link Menu Items to Pages

Handle the AccordionControl.ElementClick event and change the NavigationFrame.SelectedPage property value based on the clicked item:

C#

void accordionControl1_ElementClick(object sender, ElementClickEventArgs e) {
  Dictionary<string, NavigationPage> pages = new Dictionary<string, NavigationPage>() {
   ["Customers"] = navPageCustomers,
   ["Employees"] = navPageEmployees
  };
  navigationFrame1.SelectedPage = pages[e.Element.Text];
}

VB.NET

Private Sub accordionControl1_ElementClick(ByVal sender As Object, ByVal e As ElementClickEventArgs)
  Dim pages As New Dictionary(Of String, NavigationPage)() From {
    {"Customers", navPageCustomers},
    {"Employees", navPageEmployees}
  }
  navigationFrame1.SelectedPage = pages(e.Element.Text)
End Sub

Apply a Skin

This tutorial applies the WXI skin as follows:

C#

UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI);

VB.NET

UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI)

If you wish to add a Ribbon item that allows users to change the skin/palette at runtime, read the following help topic: Add and Customize the Ribbon Skin List and Skin Gallery.