Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[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
  [Collapse]Ribbon, Bars and Menu
   [Collapse]Bars
    [Collapse]Tutorials
      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]Ribbon
   [Expand]Popup Menus
    Radial Menu
   [Expand]Common Features
   [Expand]Examples
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical 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
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap 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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

    Tip

    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.

Note

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 Code Sample

How would you rate this topic?​​​​​​​