DevExpress Demo Center-inspired Side Navigation UI Metaphor for Your Next Great WinForms App

Ready to introduce a DevExpress Demo Center-inspired user experience (based on Fluent UI and Windows 11 UX standards) to your next Great WinForms app?

As you can see in the image below, our Demo Center-inspired UX uses the left-side menu as the app’s primary navigation area. The menu optimizes vertical space to display more menu items on-screen (useful for WinForms applications with complex menu/navigation structures). The integrated search box allows users to locate specific menu items with ease (dynamically filtered results, ensuring relevant options remain visible and accessible).

Implementation Details

Our Ribbon Form includes DevExpress WinForms Accordion and Navigation Frame controls. The Navigation Frame control contains two pages with Data Grid controls. Users can click Accordion items to navigate between pages.

Customize the WinForms Accordion Control

void InitAccordionControl() { 
    accordionControl1.Dock = DockStyle.Left; 
    // Non-collapsible navigation menu 
    accordionControl1.ViewType = AccordionControlViewType.Standard; 
    accordionControl1.OptionsHamburgerMenu.DisplayMode = AccordionControlDisplayMode.Overlay; 
    // Set static Accordion groups 
    accordionControl1.ShowGroupExpandButtons = false; 
    accordionControl1.ExpandGroupOnHeaderClick = false; 
    // Display the filter/search box 
    accordionControl1.ShowFilterControl = ShowFilterControl.Always; 
    // Display a compact/fluent scrollbar 
    accordionControl1.ScrollBarMode = ScrollBarMode.Fluent; 
    // Highlight the selected item 
    accordionControl1.AllowItemSelection = true; 
    // Display the navigation menu on the left side 
    this.NavigationControl = accordionControl1; 
}

Create Menu Items

void CreateAccordionItems() { 
    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 
    // The '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); 
}

Implement Page Navigation

Handle the AccordionControl.ElementClick event to change the NavigationFrame.SelectedPage property based on the clicked item.

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];
}

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)