Ribbon UI

• Aug 01, 2019
• 3 minutes to read

The Dashboard Designer’s Ribbon toolbar provides two page categories.

• Main pages
• Contextual pages

The main pages include:

• Home - contains common dashboard commands allowing you to create a new dashboard and add dashboard items, add a title, save the created dashboard, etc.;
• Data Source - contains commands related to creating and editing data sources, calculated fields, etc.;
• View - allows you to switch between built-in application themes.

Contextual pages contain commands related to a specific dashboard item. For instance, these commands allow you to apply filtering to dashboard item data, perform specific layout operations, etc.

• Create a Ribbon at Design Time
• Customize a Ribbon at Design Time
• Update a Ribbon
• Customize a Ribbon in Code
• Member Table

Create a Ribbon at Design Time

Click the DashboardDesigner‘s smart tag to create and initialize a Ribbon at design time within Visual Studio:

Select Create Ribbon in the invoked context menu to add the following visual and non-visual components:

• A RibbonControl along with a BackstageViewControl descendant.

• The DashboardPopupMenu component allows you to customize Dashboard Designer’s popup menus at design-time using its Run Designer command.

  

• The DashboardBarAndDockingController component is a BarAndDockingController descendant that stores the LookAndFeel, appearance and customization settings of the Dashboard Designer. The DashboardDesigner.BarAndDockingController property provides access to DashboardBarAndDockingController.
• The DashboardBarController component supports the internal infrastructure.
• The TextBoxEditorBarController component supports the UI of the Text Box dashboard item in editing mode.

Customize a Ribbon at Design Time

To customize the RibbonControl, click its smart tag and choose Run Designer. To learn how to customize Ribbon items, the Quick Access Toolbar, a popup menu, etc., see the Ribbon Control Designer topic.

Update a Ribbon

If your application already contains a Ribbon (for instance, from the earlier version of the Dashboard Designer), you can select the Update Ribbon menu item to update it:

The Update Ribbon command from the smart tag menu updates all elements related to the default ribbon created by the Dashboard Designer. If you customize default elements in the Ribbon and then use the Update Ribbon command, apply the same customizations after updating has been finished.

Important

If you are upgrading your project to another major release, you should update the Ribbon.

Customize a Ribbon in Code

To create and initialize a Ribbon in code, use the DashboardDesigner.CreateRibbon method.

You can obtain an instance of the RibbonControl using the following code.

C#

using DevExpress.XtraBars.Ribbon;
//...
RibbonControl ribbon = dashboardDesigner.MenuManager as RibbonControl;

VB.NET

Imports DevExpress.XtraBars.Ribbon
//...
Dim ribbon As RibbonControl = TryCast(dashboardDesigner.MenuManager, RibbonControl)

Member Table

The Dashboard Designer’s Ribbon contains the following elements.

The table below lists these elements and their descriptions, as well as properties that affect element functionality and appearance.

Element	Description	Ribbon API
Quick Access Toolbar	Provides access to the most important and frequently used features in the Dashboard Designer.	RibbonControl.Toolbar RibbonQuickAccessToolbar.ItemLinks
Application Button	Provides access to the Dashboard Designer’s main menu.	RibbonControl.ShowApplicationButton RibbonControl.ApplicationButtonDropDownControl
Main pages	Contain common dashboard commands.	RibbonControl.Pages
Page Category	Combines pages related to a particular dashboard item.	RibbonControl.Categories
Contextual pages	Contain commands related to a particular dashboard item.	RibbonPageCategory.Pages
Page Groups	Represent groups of bar item links within a Ribbon Page.	RibbonPage.Groups RibbonPageGroup.ItemLinks
Bar Item links	Visual elements (command buttons, editors, submenus, static text, etc.) displayed within the Ribbon. A Bar Item link refers to a specific bar item.	RibbonControl.Items BarItemLink.Item