Ribbon Page Categories and Contextual Pages
- 3 minutes to read
The Ribbon Control consists of page categories which own ribbon pages. Each page within the RibbonControl belongs to a specific page category - either the default or a custom category. The page’s category affects how the page is represented on screen.
Pages that belong to the default category are considered main pages of a Ribbon application, while pages that belong to custom categories should provide context specific information. Use custom categories to implement contextual pages, as in the Microsoft Office UI. This topic provides more information.
Default Page Category
The RibbonControl must always contain a single category, called default. It’s represented by the RibbonDefaultPageCategory class. Unlike custom categories, the default category’s caption is never displayed on screen.
Pages that belong to the default category can be thought of as main, context independent tabs. Although these pages can be temporarily hidden when required, in most instances an application is designed so that these pages are permanently visible during the application run.
The following image shows a RibbonControl with two pages (Home and Gallery Page) belonging to the default category.
To define a default category, create a RibbonDefaultPageCategory object and add it to the RibbonControl’s Items collection. Pages can then be added to the category’s RibbonPageCategoryBase.Pages collection. In XAML, they can be directly added between the RibbonDefaultPageCategory start and end tags.
For each page, you can access the parent category via the RibbonPage.PageCategory property. For the default category, the RibbonPageCategoryBase.IsDefault property returns true. For custom categories, this property returns false.
Custom Page Categories and Contextual Tabs
The RibbonControl allows contextual tab pages to be implemented, as in the Microsoft Office UI. These pages are designed to display context specific commands, so they don’t need to be constantly displayed, but displayed only when a particular object is selected, or an end-user performs a certain action.
To implement contextual tab pages, create a custom page category (RibbonPageCategory), add it to the RibbonControl’s Items collection, and then add ribbon pages to the category. Unlike the default page category, captions of custom categories are visible and specifically colored. The following image shows a RibbonControl with a custom Selection page category containing a Selection tab page.
When contextual tab pages are made visible, they are displayed to the right of the default tab pages (they can also be optionally anchored at the right edge of the RibbonControl via the RibbonControl.PageCategoryAlignment property). Above their captions, a corresponding category’s caption (RibbonPageCategoryBase.Caption) is displayed. With the RibbonControl, you can display multiple page categories simultaneously, and each can contain one or more contextual tabs.
Custom page categories with contextual pages should be displayed dynamically, according to your requirements (for instance, when a specific object is selected). So, their visibility status must be controlled manually. To hide and display page categories and contextual pages, use the RibbonPageCategoryBase.IsVisible and RibbonPage.IsVisible properties. Typically, only a category’s visibility should be changed, as this automatically affects the visibility status of all pages that belong to this category.
To activate/select a specific page, use the RibbonPage.IsSelected or RibbonControl.SelectedPage property.
Appearances of Categories and Contextual Tabs
Custom categories and their pages are painted slightly differently than default pages. It’s possible to explicitly specify the background color for custom categories and pages via the RibbonPageCategoryBase.Color property. This color is mixed with the control’s background when captions of page categories and pages are rendered.
By default, custom categories are displayed to the right of the default Ribbon pages. The RibbonControl.PageCategoryAlignment property allows these to be anchored to the right edge of the RibbonControl.