NavBarControl to AccordionControl Converter

• Jan 20, 2025
• 3 minutes to read

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.

• Unlimited number of hierarchy levels (AccordionControl.Elements, AccordionControlElement.Elements)
• Items and groups can display images and text in their headers (AccordionControlElementBase.Image, AccordionControlElementBase.ImageIndex, AccordionControlElementBase.Text)
• Items can display custom controls in an expandable area below their headers (AccordionControlElementBase.ContentContainer)
• The Hamburger Menu paint style. (AccordionControl.ViewType, AccordionOptionsHamburgerMenu.DisplayMode)
• Load items’ content dynamically (AccordionControl.HasContentContainer, AccordionControl.GetContentContainer)
• One or multiple elements can be expanded simultaneously (AccordionControl.ExpandElementMode)
• Context buttons in item and group headers (AccordionControl.ItemContextButtons, AccordionControl.GroupContextButtons and AccordionControl.ContextButtonCustomize)
• Custom controls in item headers (AccordionControlElementBase.HeaderControl)
• Item selection feature (AccordionControl.AllowItemSelection) - Allows you to highlight a clicked item.
• Item and group expanding/collapsing animation (AccordionControl.AnimationType)
• The built-in search box (AccordionControl.ShowFilterControl) - Allows you to filter items based on the search text.
• Support for an external search box (SearchControl).

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.

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.ResizeMode

| |

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

|

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.