Skip to main content

Page Header Items

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

Ribbon_PageHeaderItemLinks

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.

Ribbon PageHeader Items

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.

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.

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) {
    //...
}

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

Colorization in Vector Skins