NavBarControl to AccordionControl Converter

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

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.

NavBarToAccordionConverter_Convertion

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.

NavBarToAccordionConverter_Convertion1

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

NavBarToAccordionConverter_Convertion2

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

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.