Skip to main content

Add Bar Items To Toolbars

  • 6 minutes to read

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

Bars - Lesson 2 Overview Image

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.

    Bars - Add Bar Item

  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.

    Bars - Underlined 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.

    Bars - Add Items To Menus

    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.

    Bars - Add Items To Menus 2

  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.

    Bars - File Stub Glyphs

  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.

    Bars - Add Images to Bar Items

    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.

    Bars - Main Menu Sample

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

    Bars - Status Bar Static Text Item

  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.

    Bars - Status Bar Static Text Item (no border)

  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.

    Bars - Static Item Width

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

    Bars - Static Item Text Alignment

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

    Bars - Static Item Alignment

  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.

    Bars - Add Editors

    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.

    Bars - Change Editor Type

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

    Bars - Zoom Track Bar

  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.

    Bars - Zoom Track Bar (no border)

  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.

    Bars - Zoom Track Bar Alignment

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

    Bars - Zoom Track Bar Order

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

To assign values to editors embedded in BarEditItems, use the BarEditItem.EditValue 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.

Bar Manager Designer

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

Bars - Designer 2018

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

Code Sample

public void AddBarItems() {
    #region Main Menu Bar
    bm.BeginUpdate();
    BarSubItem bsiFile = new BarSubItem(bm, "&File");
    BarButtonItem bbiNew = new BarButtonItem(bm, "New");
    bbiNew.ImageUri.Uri = "New";
    BarButtonItem bbiOpen = new BarButtonItem(bm, "Open");
    bbiOpen.ImageUri.Uri = "Open";
    BarButtonItem bbiClose = new BarButtonItem(bm, "Close");
    bbiClose.ImageUri.Uri = "Close";
    bsiFile.AddItems(new BarItem[] { bbiNew, bbiOpen, bbiClose });
    bm.MainMenu.AddItem(bsiFile);
    bm.EndUpdate();
    #endregion
    #region Status Bar
    BarStaticItem bsiLinePos = new BarStaticItem() {
        Caption = "Line: 0 Position: 0",
        Alignment = BarItemLinkAlignment.Left,
        Width = 150,
        AutoSize = BarStaticItemSize.None,
        TextAlignment = System.Drawing.StringAlignment.Center
    };
    BarStaticItem bsiReady = new BarStaticItem() {
        Caption = "Ready",
        Alignment = BarItemLinkAlignment.Right,
        Width = 80,
        AutoSize = BarStaticItemSize.None,
        TextAlignment = System.Drawing.StringAlignment.Far,
        Border = DevExpress.XtraEditors.Controls.BorderStyles.NoBorder
    };
    BarEditItem beiZoom = new BarEditItem(bm, new RepositoryItemZoomTrackBar()) {
        EditWidth = 150,
        Alignment = BarItemLinkAlignment.Right
    };
    beiZoom.Edit.BorderStyle = DevExpress.XtraEditors.Controls.BorderStyles.NoBorder;
    bm.StatusBar.AddItems(new BarItem[] { bsiLinePos, beiZoom, bsiReady });
    #endregion
}
See Also