windowsforms-116782-controls-and-libraries-ribbon-bars-and-menu-bars-tutorials-add-bar-items-to-toolbars.md
In this tutorial, you will add items to your main menu and status bars.
Click the [Add] link within the main menu bar. You will see a drop-down menu with all the bar items available for adding.
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.
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.
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.
Add button icons by clicking required items and specifying the BarItem.ImageOptions.Image property. You can utilize free DevExpress icons available from the Image Gallery.
Repeat the steps above to create the desired main menu.
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”.
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.
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.
Add one more status label with the “Ready” caption and dock it to the bar’s right edge using the BarItem.Alignment property.
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.
Enlarge your trackbar by increasing the BarEditItem.EditWidth value.
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.
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.
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.
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.
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
}
Public Sub AddBarItems()
' #Region "Main Menu Bar"
bm.BeginUpdate()
Dim bsiFile As New BarSubItem(bm, "&File")
Dim bbiNew As New BarButtonItem(bm, "New")
bbiNew.ImageUri.Uri = "New"
Dim bbiOpen As New BarButtonItem(bm, "Open")
bbiOpen.ImageUri.Uri = "Open"
Dim bbiClose As New BarButtonItem(bm, "Close")
bbiClose.ImageUri.Uri = "Close"
bsiFile.AddItems(New BarItem() { bbiNew, bbiOpen, bbiClose })
bm.MainMenu.AddItem(bsiFile)
bm.EndUpdate()
' #End Region
' #Region "Status Bar"
Dim bsiLinePos As New BarStaticItem() With {.Caption = "Line: 0 Position: 0", .Alignment = BarItemLinkAlignment.Left, .Width = 150, .AutoSize = BarStaticItemSize.None, .TextAlignment = System.Drawing.StringAlignment.Center}
Dim bsiReady As New BarStaticItem() With {.Caption = "Ready", .Alignment = BarItemLinkAlignment.Right, .Width = 80, .AutoSize = BarStaticItemSize.None, .TextAlignment = System.Drawing.StringAlignment.Far, .Border = DevExpress.XtraEditors.Controls.BorderStyles.NoBorder}
Dim beiZoom As New BarEditItem(bm, New RepositoryItemZoomTrackBar()) With {.EditWidth = 150, .Alignment = BarItemLinkAlignment.Right}
beiZoom.Edit.BorderStyle = DevExpress.XtraEditors.Controls.BorderStyles.NoBorder
bm.StatusBar.AddItems(New BarItem() { bsiLinePos, beiZoom, bsiReady })
' #End Region
End Sub
See Also