[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
  [Collapse]Ribbon, Bars and Menu
      Add and Remove Toolbars
      Add Bar Items To Toolbars
      Bar Item Links
      Provide Functionality to Bar Items
      Toolbar Customization
      Recently Used Items
      Create Popup Menus
     MDI Merging
    [Expand]Bar Manager Designer
    [Expand]Runtime Customization and Layout Management
    [Expand]Appearance and Hotkeys
   [Expand]Popup Menus
    Radial Menu
   [Expand]Common Features
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [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]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Add Bar Items To Toolbars

In this tutorial, you will add items to your main menu and status bars.

Expanded Add Buttons and Sub-Menus

  1. Click the [Add] link within the main menu bar. You will see a drop-down menu with all the bar items available for adding.

  2. Main menu bars traditionally contain sub-menus only, so select the "Menu (BarSubItem)" option, enter the sub-menu caption and press Enter. Start your bar item captions with the ampersand character (&) to instantly generate keyboard shortcuts for these items. For instance, the following figure illustrates a sub-menu with the "&File" caption - notice the automatically underlined "F" character.

    When an end-user presses ALT to enable keyboard navigation, pressing the F key will open this sub-menu. Note that the ampersand character can be placed before any desired symbol, not only before the first one.

  3. Click your "File" sub-item at design-time. This will invoke the sub-menu with the same [Add] link, which when clicked, allows you to add items to this menu.

    Add three regular buttons (BarButtonItem objects) to the menu and set their captions as "New", "Open" and "Close". Remember to place the ampersand characters before desired caption letters to create keyboard shortcuts.

  4. By default, all bar items eligible for showing icons will display fake icons with initial letters of these items' captions. These fake icons are called Stub Glyphs. Bar items show these icons unless you manually provide custom icons for them.

  5. Add button icons by clicking required items and specifying the BarItem.Glyph property. You can utilize free DevExpress icons available from the Image Gallery.


    There are two more ways to specify bar item icons.

    Note that the "File" sub-menu button will not display an icon even when you assign one. This is the default behavior for main menu items.

  6. Repeat the steps above to create the desired main menu.

Expanded Add Labels and Editors

  1. To populate the Status Bar, click the same [Add] button and select the "Static Text (BarStaticItem)" option. Set its caption to "Line: 0 Position: 0".

  2. Take a look at the vertical dash drawn near the static bar item's right edge. To remove this separator, set the BarItem.Border property to BorderStyles.NoBorder.

  3. Static items are auto-sized by default. To change this behavior, switch the item BarStaticItem.AutoSize property to None and set your custom item size using the BarItem.Size property.

    Additionally, you can change the bar static item's caption alignment by utilizing the BarStaticItem.TextAlignment property.

  4. Add one more status label with the "Ready" caption and dock it to the bar's right edge using the BarItem.Alignment property.

  5. Any bar can display editors from the DevExpress Editors bundle. To do so, the required repository item must be embedded to the BarEditItem object, which in turn can be hosted within a bar or a menu. To add the desired editor at design-time, click [Add] and hover the "Editor (BarEditItem)" menu item for a while. You will see a list of all available DevExpress editors. Find and click the "ZoomTrackBarControl" to add a bar edit item that contains the RepositoryItemZoomTrackBar object.

    In case you did not click the right place and created an editor of the wrong type, locate the BarEditItem.Edit property in the Visual Studio Properties window and invoke its drop-down menu. Expand the "New" node and choose the correct editor type. The "Existing" node displays all existing repository items and allows you to re-use them throughout multiple bar edit items.

  6. Enlarge your trackbar by increasing the BarEditItem.EditWidth value.

  7. Expand the BarEditItem.Edit node in the VS Properties window and set the repository item's RepositoryItem.BorderStyle property to BorderStyles.NoBorder. This will remove borders drawn around the trackbar.

  8. Move the trackbar to the bar's right edge by setting the BarItem.Alignment property to the corresponding value. By doing so, you will arrange the trackbar after the "Ready" static bar item.

    To swap these two bar items, drag the trackbar and drop it before the static item.


An in-place editor (BaseEdit descendant) within a Bar, Menu or Ribbon Control is created from a RepositoryItem descendant and activated only when a corresponding edit box is focused. If the edit box is not focused, the editor doesn't exist at this point in time. When the edit box loses focus, the corresponding editor is automatically destroyed. So, it's not possible to access an editor displayed within a Bar/Menu/Ribbon Control unless this editor has focus.

To access and customize a specific in-place editor, first activate the editor via the BarEditItemLink.ShowEditor method. To access the editor, use the BarManager.ActiveEditor property (for the RibbonControl, use the RibbonControl.Manager.ActiveEditor property).

Specific dropdown editors allow their items to be populated from a data source (e.g., a LookUpEdit or CheckedComboBoxEdit). If this editor is embedded into a Bar or Ribbon Control and the corresponding edit box is not focused, changes made to the data source are not reflected by the edit box. To update the edit box, you can use the BarItem.Refresh method.

Expanded Bar Manager Designer

You can also use the Bar Manager Designer to add buttons and editors, and move them to desired toolbars.

The Bar Manager Designer is accessible via the component's smart tag.

Expanded Code Sample

Expanded See Also

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