syncfusion-wpf-navigation-pane

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

Common Patterns

Key Properties

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly references (Tools.WPF + Shared.WPF)
• Add via designer, XAML, or C#
• Declarative GroupBarItems with GroupView content
• Adding panel content to GroupBarItem
• Basic VisualMode overview
• Themes with SfSkinManager

GroupBar Items

📄 Read: references/groupbar-items.md

• GroupBarItem properties (Header, HeaderText, HeaderImageSource)
• IsSelected, ShowInGroupBar, GroupBarItemCornerRadius
• GroupBarItemCursorType (Default/Hand)
• ItemContentLength (content area height/width)
• DraggingItemInProgress, HiddenItemsCount
• GroupBarItemAdded / GroupBarItemRemoved events

GroupView and Content

📄 Read: references/groupview-and-content.md

• GroupView as item container with GroupViewItem elements
• GroupViewItem (Text, ImageSource, tooltip)
• IsListViewMode (list vs icon display)
• Default image for GroupViewItem
• Adding panels and custom UIElements as content
• Rotating item content

Visual Modes

📄 Read: references/visual-modes.md

• Default mode (one item expanded at a time)
• MultipleExpansion mode (tree-view style)
• StackMode (Outlook bar style, popup menu at bottom)
• AllowCollapse, ShowGripper
• ThemeStudio vs classic theme layout difference in StackMode

Data Binding

📄 Read: references/data-binding.md

• ItemsSource + ItemContainerStyle with HeaderText/Content setters
• Model + ViewModel with ObservableCollection
• DataContext binding pattern
• Data binding with XML (XmlDataProvider)
• HeaderTemplate and ContentTemplate customization
• ItemContainerStyleSelector for conditional styles

Orientation and Layout

📄 Read: references/orientation-and-layout.md

• GroupBar orientation (Horizontal/Vertical)
• GroupView and GroupViewItem orientation
• Adjusting GroupBar width, changing header height
• Rotating the GroupBar
• FlowDirection for RTL support
• Navigation Pane: PopupResizeDirection, ShowGripper

Behavior and Features

📄 Read: references/behavior-and-features.md

• Drag-and-drop reordering (DragItemVisibility, DragMarkerBrush)
• Built-in context menu (sort, add, rename, move)
• Toolbars inside GroupBar
• Tooltip for GroupViewItems
• Animation for expand/collapse
• Collapsing and closing in StackMode
• State persistence (SaveBarState/LoadBarState/ResetBarState)
• Localization

Appearance

📄 Read: references/appearance.md

• GroupBarHeaderStyle (background, corner radius, height)
• CollapseButtonTemplate and CollapseButtonBackground
• ItemContainerStyle (HeaderTemplate + ContentTemplate)
• ItemContainerStyleSelector
• DragMarkerBrush
• SfSkinManager themes table
• ThemeStudio custom themes