[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Collapse]Navigation Bar
     Views
    [Expand]Appearance
     Save and Restore Layout
    [Expand]Examples
    [Expand]Member Tables
     NavBarControl to AccordionControl Converter
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

NavBarControl to AccordionControl Converter

The NavBarControl and AccordionControl allow you to implement a navigation functionality in your application. The accordion control, which was released later than the nav bar control, provides a modern view and the following features.

To automatically convert an existing NavBarControl to an AccordionControl, invoke the corresponding command in the smart tag menu. The controls are converted automatically, and your assistance is not required. However, this topic describes how controls, groups, and items are interchanged, and which settings are affected.

Tip

Since a backward automatic conversion is not supported, make a back-up copy of the project before proceeding.

Expanded How the Controls are Converted

Paint Style

The NavBarControl can be displayed in different styles (see NavBarControl.PaintStyleKind). The AccordionControl does not support styles, but it can display the root groups and items in the control footer. This allows it to mimic the nav bar control’s view and behavior.

If the initial NavBarControl is painted in the NavigationPane style, the resulting AccordionControl displays its root groups and items in the control footer.

If the NavBarControl's paint style differs from the NavigationPane, the AccordionControl does not display the footer.

Selecting Items

If the NavBarControl's NavBarControl.LinkSelectionMode option is set to OneInControl, the AccordionControl also allows users to select items (see AccordionControl.AllowItemSelection).

Other Settings

Review the information below to see how the AccordionControl properties are specified based on the NavBarControl properties. You can adjust these properties after the conversion if necessary.

NavBarControl

AccordionControl

NavBarControl.AllowGlyphSkinning

AccordionControl.AllowGlyphSkinning

NavBarControl.AllowHorizontalResizing

AccordionControl.AllowHorizontalResizing

NavBarControl.AllowHtmlString

AccordionControl.AllowHtmlText

NavBarControl.Appearance

NavBarControl.Appearance.Background

NavBarControl.Appearance.Hint

NavBarControl.Appearance.GroupHeader

NavBarControl.Appearance.GroupHeaderHotTracked

NavBarControl.Appearance.GroupHeaderPressed

NavBarControl.Appearance.Item

NavBarControl.Appearance.ItemHotTracked

NavBarControl.Appearance.ItemPressed

NavBarControl.Appearance.ItemDisabled

AccordionControl.Appearance

AccordionControl.Appearance.AccordionControl

AccordionControl.Appearance.Hint

AccordionControl.Appearance.Group.Normal

AccordionControl.Appearance.Group.Hovered

AccordionControl.Appearance.Group.Pressed

AccordionControl.Appearance.Item.Normal

AccordionControl.Appearance.Item.Hovered

AccordionControl.Appearance.Item.Pressed

AccordionControl.Appearance.Item.Disabled

NavBarControl.ExplorerBarGroupInterval

AccordionControl.DistanceBetweenRootGroups

NavBarControl.LargeImages

NavBarControl.SmallImages

AccordionControl.Images

OptionsNavPane.CollapsedWidth

OptionsMinimizing.MinimizedWidth

OptionsNavPane.ExpandedWidth

OptionsMinimizing.NormalWidth

OptionsNavPane.ShowHeaderText

AccordionOptionsFooter.ActiveGroupDisplayMode

NavBarControl.ShowGroupHint

NavBarControl.ShowLinkHint

BaseControl.ShowToolTips

Groups and Items

For each group, item or separator in the nav bar, a corresponding accordion group, item or separator is created. If a nav bar group contains other controls (see NavBarGroup.ControlContainer), these controls are moved to the accordion group. The table below contains equivalent properties of the nav bar and accordion elements.

NavBarControl

AccordionControl

NavElement.Appearance

AccordionControlElement.Appearance

NavElement.Caption

AccordionControlElementBase.Text

NavElement.ImageOptions

Depending on the NavBarGroup.GroupCaptionUseImage or NavBarGroup.GroupStyle property,

the accordion group or item uses large or small images.

AccordionControlElementBase.ImageOptions

Expanded Converting the Application Form to a Fluent Design Form

You can enable the HamburgerMenu view for the created AccordionControl by using the AccordionControl.ViewType property. The hamburger menu can be embedded to a FluentDesignForm that features:

  • Adaptive Layout mode for the Hamburger Menu (automatically switches between Inline, Overlay and Minimal display modes when you resize the form)
  • Acrylic Material effect (a partially transparent texture)
  • Reveal Highlight visual effect

To convert the application form to the FluentDesignForm, use the Form Assistant component. For more information, see Fluent Design Form.

Is this topic helpful?​​​​​​​