content format

To build a custom vertical accordion menu in Windows Presentation Foundation (WPF), the most efficient approach is to subclass a standard ItemsControl or ListBox. This lets you use a collection of Expander controls to provide the collapsible panels. By binding their states together, you can guarantee that expanding one menu item automatically collapses all others.

This implementation uses an MVVM-friendly ListBox architecture combined with custom control templates. Step 1: Create the Data Models

Define the data structures that hold your menu navigation items and sub-items.

using System.Collections.Generic; public class SubMenuItem { public string Title { get; set; } // Add navigation commands or target view names here } public class MainMenuItem { public string Title { get; set; } public string IconData { get; set; } // Path geometry for modern vector icons public List SubItems { get; set; } } Use code with caution. Step 2: Build the Main ViewModel

The ViewModel initializes the menu collection and exposes it to the View.

using System.Collections.Generic; public class MainViewModel { public List AccordionMenu { get; set; } public MainViewModel() { AccordionMenu = new List { new MainMenuItem { Title = “Account”, IconData = “M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z”, SubItems = new List { new SubMenuItem { Title = “Profile” }, new SubMenuItem { Title = “Settings” } } }, new MainMenuItem { Title = “Security”, IconData = “M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.18V12Z”, SubItems = new List { new SubMenuItem { Title = “Passwords” }, new SubMenuItem { Title = “Permissions” } } } }; } } Use code with caution. Step 3: Design the Custom XAML Interface

Set your window’s DataContext to your MainViewModel. This layout uses a ListBox styled to act like an accordion container, mapping each item to a customized WPF Expander.

Use code with caution. Step 4: Customize the Expander Arrow (Optional Styling)

To change the look of the expander arrow or place it on the right side, override the default ControlTemplate of the Expander.

Use code with caution. For advanced functionality, you can: C# WPF accordion collapsing Images – Stack Overflow