Version

Tab Item Area Toolbar (xamRibbon)

Topic Overview

Purpose

This topic explains how to create and configure the toolbar area positioned next to the tab items.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

In this topic you’ll find any information that will help you to better understand the functionalities of the xamRibbon control.

The topics in this section describe the ribbon tab area of xamRibbon and demonstrates how to add them to xamRibbon .

In this topic

This topic contains the following sections:

Introduction

TabItem area toolbar summary

The xamRibbon control allows you to create a toolbar located next to the tabs. This toolbar extends from the ItemsControl class allowing you to add any kind of content in it.

This toolbar is located on the line where the tab items are placed aligned to the right. If there is not enough space to render all of the toolbar’s content, some of it will be hidden and an overflow button will be rendered on the right. Clicking this button will open a popup containing all hidden toolbar content.

Note
Note

If you want to determine at what width toolbar items will begin to be hidden you can specify the minimum width to reserve for the tab items on the left via the TabItemAreaMinWidth property.

The following screenshot demonstrates a xamRibbon control with the tab item area toolbar:

xamRibbon TAATB 1a.png

The following screenshot demonstrates a xamRibbon control with the overflow popup shown. The items in the popup were hidden from the toolbar due to the limited space, which prevented the whole toolbar’s content from being rendered next to the tab items:

xamRibbon TAATB 2a.png
  1. Overflow button

  2. Tab item area toolbar rendered in a popup

Creating and Configuring Tab Items Area Toolbar

Overview

The tab items area toolbar is represented by the TabItemAreaToolbar class. You have to instantiate it and set it to the xamRibbon’s TabItemAreaToolbar property. The TabItemAreaToolbar class provides several properties for configuring the toolbar, which are explained in the table below.

Property settings

The following table maps the desired configuration/behaviors to the property settings that manage it.

In order to: Do this:

Create a tab item area toolbar.

Create an instance of the TabItemAreaToolbar class.

Associate the instance of the tab item area toolbar to a xamRibbon control.

Set the instance to xamRibbon’s TabItemAreaToolbar property.

Specify (reserve) the minimum width of the tab items’ area.

Set the desired minimum width on the toolbar’s TabItemAreaMinWidth property.

Obtain the visibility of the overflow button.

Obtain the value of the OverflowButtonVisibility property.

Open or close the overflow area of the tab items area toolbar.

Set or obtain the IsOverflowOpen boolean property.

Example

The following code example demonstrates how to create and set a tab item area toolbar:

In XAML:

<igRibbon:XamRibbon>
    <igRibbon:XamRibbon.TabItemAreaToolbar>
        <igRibbon:TabItemAreaToolbar TabItemAreaMinWidth="150">
        <!-- add tab item area toolbar content here -->
        </igRibbon:TabItemAreaToolbar>
    </igRibbon:XamRibbon.TabItemAreaToolbar>
</igRibbon:XamRibbon>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

The topics in this section describe the key features of the Quick Access Toolbar area of xamRibbon .