Page Header Items

• May 25, 2023
• 3 minutes to read

Overview

You can display a bar item (a button, editor, static text, gallery item, etc.) in-line with page headers. The bar item can be aligned near to the page headers (left aligned) or near to the ribbon edge (right aligned).

Note

Run the Ribbon Simple Pad demo to see the Share button displayed in-line with page headers.

How to Add Bar Items to the Page Header Area in the Designer

To add bar items to the page header area, do the following.

• In the ribbon’s smart tag menu, click Run Designer.
• In the Ribbon Control Designer, go to the Ribbon PageHeader Items section.
• To add bar items to the page header area, drag and drop them from the right pane onto the left.
• Use the Alignment property to align a bar item near to page headers or the ribbon edge.
• You can also set the VisibleInSearchMenu property to false to hide a bar item in the Search Menu.
• Enable the ShowItemCaptionsInPageHeader option to display item captions.

How to Add Bar Items to the Page Header Area in Code

To display a custom button in the page header area, do the following.

• Use the CreateButton(String) method to create a button.
• Use the Alignment property to align the button near to page headers or the ribbon edge.
• You can also set the VisibleInSearchMenu property to false to hide the button in the Search Menu.
• Add the button to the PageHeaderItemLinks collection.

In the Ribbon Simple Pad demo, the ribbon displays the Share button aligned to the right. The example below shows how to add the Backward and Forward buttons.

C#

using DevExpress.XtraBars;

BarButtonItem itemBackNav = RibbonControl1.Items.CreateButton("Backward");
itemBackNav.ImageIndex = 10;
itemBackNav.VisibleInSearchMenu = false;
itemBackNav.Alignment = BarItemLinkAlignment.Left;
itemBackNav.ItemClick += new ItemClickEventHandler(itemBackNav_ItemClick);
BarButtonItem itemFrwNav = RibbonControl1.Items.CreateButton("Forward");
itemFrwNav.ItemClick += new ItemClickEventHandler(itemFrwNav_ItemClick);
itemFrwNav.ImageIndex = 11;
itemFrwNav.VisibleInSearchMenu = false;
itemFrwNav.Alignment = BarItemLinkAlignment.Left;
RibbonControl1.PageHeaderItemLinks.AddRange(new BarItem[] { itemBackNav, itemFrwNav});

void itemFrwNav_ItemClick(object sender, ItemClickEventArgs e) {
    //...
}

void itemBackNav_ItemClick(object sender, ItemClickEventArgs e) {
    //...
}

VB.NET

Imports DevExpress.XtraBars

Dim itemBackNav As BarButtonItem = RibbonControl1.Items.CreateButton("Backward")
itemBackNav.ImageIndex = 10
itemBackNav.VisibleInSearchMenu = False
itemBackNav.Alignment = BarItemLinkAlignment.Left
AddHandler itemBackNav.ItemClick, AddressOf itemBackNav_ItemClick
Dim itemFrwNav As BarButtonItem = RibbonControl1.Items.CreateButton("Forward")
AddHandler itemFrwNav.ItemClick, AddressOf itemFrwNav_ItemClick
itemFrwNav.ImageIndex = 11
itemFrwNav.VisibleInSearchMenu = False;
itemFrwNav.Alignment = BarItemLinkAlignment.Left
RibbonControl1.PageHeaderItemLinks.AddRange(New BarItem() {itemBackNav, itemFrwNav})

Private Sub itemFrwNav_ItemClick(ByVal sender As Object, ByVal e As ItemClickEventArgs)
    '...
End Sub

Private Sub itemBackNav_ItemClick(ByVal sender As Object, ByVal e As ItemClickEventArgs)
    '...
End Sub

Colorization in Vector Skins

Page header items (BarButtonItem and BarCheckitem) can adjust text and SVG icon colors based on the background color in vector skins. The background color must be set to a Skin Color (at design time, switch to the “DX Skins” tab to choose a Skin Color).