syncfusion-wpf-navigation-pane

Name: syncfusion-wpf-navigation-pane
Author: syncfusion

github.com/syncfusionDesign & UI5158 installsUpdated 1w ago

About syncfusion-wpf-navigation-pane

A guide for WPF developers implementing Syncfusion GroupBar as a navigation pane with categorized items and custom controls in expandable sections. It covers visual modes, data binding, drag-and-drop reordering, and state persistence.

Key features

01Expandable categorized navigation sections
02Default, MultipleExpansion, and StackMode
03ItemsSource data binding
04Drag-and-drop reordering and context menus
05Resizable navigation popup
06Save and restore pane state

Use cases

01Building an Outlook-style navigation sidebar
02Organizing expandable categorized content
03Binding navigation items with MVVM
04Allowing users to reorder navigation items

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-navigation-pane

After installing, type/syncfusion-wpf-navigation-panein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

appearance.md

behavior-and-features.md

data-binding.md

getting-started.md

groupbar-items.md

groupview-and-content.md

orientation-and-layout.md

visual-modes.md

Details

From the project README

Implementing WPF GroupBar (Navigation Pane)

The GroupBar control implements a navigation pane similar to the Microsoft Outlook Bar. It hosts categorized collections of items and custom controls in expandable/collapsible sections. Supports multiple visual modes, data binding, drag-and-drop reordering, context menus, toolbars, and full theme support.

Assemblies: Syncfusion.Tools.WPF + Syncfusion.Shared.WPF
Namespace: Syncfusion.Windows.Tools.Controls
XAML Schema: xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

Control Hierarchy

GroupBar                    ← Root navigation container
└── GroupBarItem            ← Category tab/header (e.g., "Mailbox", "Contacts")
    ├── GroupView           ← List container for link-style items
    │   └── GroupViewItem   ← Clickable item with text and icon
    └── Panel / any UIElement ← Or use any WPF panel as content

When to Use This Skill

User wants an Outlook-style navigation sidebar or accordion panel
User needs expandable/collapsible sections with content inside
User asks about GroupBar, GroupBarItem, GroupView, GroupViewItem
User needs StackMode (Outlook bar), MultipleExpansion (tree-view), or Default mode
User needs data-bound navigation items using MVVM
User asks about drag-and-drop reordering of navigation items
User asks about Navigation Pane popup, gripper, or resize behavior

Quick Start

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:GroupBar Height="300" Width="230" VisualMode="StackMode" Name="groupBar">
    <syncfusion:GroupBarItem Header="Mailbox" HeaderImageSource="Images/mail.png">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="Inbox"     ImageSource="Images/inbox.png"/>
            <syncfusion:GroupViewItem Text="Sent Items" ImageSource="Images/sent.png"/>
            <syncfusion:GroupViewItem Text="Deleted"   ImageSource="Images/trash.png"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
    <syncfusion:GroupBarItem Header="Contacts">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="All Contacts"/>
            <syncfusion:GroupViewItem Text="Favorites"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
</syncfusion:GroupBar>

using Syncfusion.Windows.Tools.Controls;

GroupBar groupBar = new GroupBar();
groupBar.VisualMode = VisualMode.StackMode;

GroupBarItem item = new GroupBarItem { Header = "Mailbox" };
GroupView view = new GroupView();
view.Items.Add(new GroupViewItem { Text = "Inbox" });
item.Content = view;
groupBar.Items.Add(item);
this.Content = groupBar;

Common Patterns

Goal	Approach
Outlook-style navigation	`VisualMode="StackMode"`
Tree-style multi-expand	`VisualMode="MultipleExpansion"`
One-at-a-time expand	`VisualMode="Default"`
Collapsible bar	`AllowCollapse="True"` + `VisualMode="StackMode"`
Data-bound items	`ItemsSource` + `ItemContainerStyle` with `HeaderText`/`Content` setters
Custom item content	Place any `Panel` or `UIElement` as `GroupBarItem.Content`
List-view style items	`GroupView` with `IsListViewMode="True"`
Drag-reorder items	`DragItemVisibility="True"`
Resize navigation popup	`PopupResizeDirection="Both"`
Gripper for StackMode	`ShowGripper="True"` + `VisualMode="StackMode"`
Save/restore bar state	`SaveBarState()` / `LoadBarState()` / `ResetBarState()`

Key Properties

Property	Type	Description
`VisualMode`	`VisualMode`	Default / MultipleExpansion / StackMode
`AllowCollapse`	`bool`	Allow collapsing (StackMode)
`ShowGripper`	`bool`	Show resize gripper (StackMode)
`ItemsSource`	`IEnumerable`	Data-bound items
`ItemContainerStyle`	`Style`	Style applied to each `GroupBarItem`
`DragItemVisibility`	`bool`	Enable drag-and-drop reordering
`DragMarkerBrush`	`Brush`	Color of drag insertion marker
`PopupResizeDirection`	`PopupResizeDirection`	Navigation pane popup resize (Both/H/V/None)
`ItemContentLength`	`double`	Height/width of selected item content area
`GroupBarHeaderStyle`	`Style`	Style for GroupBar header border
`GroupBarItem.Header`	`string`	Display text for item header
`GroupBarItem.HeaderImageSource`	`ImageSource`	Icon in item header
`GroupBarItem.IsSelected`	`bool`	Expand this item initially
`GroupBarItem.GroupBarItemCornerRadius`	`CornerRadius`	Rounded corners on item header
`GroupView.IsListViewMode`	`bool`	List-view style (vs icon style)
`GroupViewItem.Text`	`string`	Text label for view item
`GroupViewItem.ImageSource`	`ImageSource`	Icon for view item
`SaveOriginalState`	`bool`	Auto-save state on load