# Ribbon Tab

Telerik **RadRibbonView** provides a simple and consistent way for building interfaces similar to the ribbon control used in Microsoft Office. The **RadRibbonView** consists of various elements, one of which is the **Ribbon Tab**. This topic discusses concepts fundamental to the **Ribbon Tab** at first and then goes into the usage of the **RadRibbonTab** class and its features.

> tip Before proceeding with this tutorial, it is recommended to get familiar with the [Visual Structure](https://www.telerik.com/winui/documentation/controls/radribbonview/visual-structure) of the **RadRibbonView** control.

## Fundamentals

> You can access the **RadRibbonTab** control through an alias pointing to the **Telerik.UI.Xaml.Controls** namespace: `xmlns:telerik="using:Telerik.UI.Xaml.Controls"`

The **RadRibbonView** helps end-users to quickly find the tools and options they need in order to complete a task. Tools and options are organized in [logical groups](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-group) that are collected together under specific **tabs**. Or in other words: the **Ribbon Tab** lets you categorize the commands to be displayed for the end-users.

![WinUI RadRibbonView ](https://www.telerik.com/winui/documentation/assets/1f1c0f51bcb02ed8c9483956c9dda81a/ribbonview_tab_overview.png)

## Adding RadRibbonTabs to the RadRibbonView

When you are designing a new **RadRibbonView**, one of your first tasks will be to add tabs. In order to add **RibbonTabs** to your **RadRibbonView** control, you need to populate the **RadRibbonView**'s **Items** collection.

The next example demonstrates how to add several **RadRibbonTab** to your ribbon and how to set their **Header** property.

#### **Example 1: Adding RadRibbonTabs**

```XAML
<telerik:RadRibbonView x:Name="radRibbonView">
	<telerik:RadRibbonTab Header="Home">
	</telerik:RadRibbonTab>
	<telerik:RadRibbonTab Header="Insert">
	</telerik:RadRibbonTab>
	<telerik:RadRibbonTab Header="Page Layout">
	</telerik:RadRibbonTab>
	<telerik:RadRibbonTab Header="References">
	</telerik:RadRibbonTab>
	<telerik:RadRibbonTab Header="Mailings">
	</telerik:RadRibbonTab>
	<telerik:RadRibbonTab Header="Review">
	</telerik:RadRibbonTab>
	<telerik:RadRibbonTab Header="View">
	</telerik:RadRibbonTab>
</telerik:RadRibbonView>
```

## RadRibbonTab Properties

The **RadRibbonTab** exposes the following properties that allow you to further customize it:

* **IsSelected**: A boolean property that specify whether a tab is selected. The first item in the **Items** collection is the default selected **RadRibbonTab**. However, you have the ability to change the default selected **RibbonTab**, by setting the **RadRibbonTab**'s **IsSelected** property.

* **HeaderVisibility**: A property of type **Visibility** that gets or sets visibility state of the RadTabItem's header.

* **MinimizedBackground**: A property of type **Brush** that gets or set the background of the RadRibbonTab in minimized state.

* **ContextualGroupName**: A property of type **string** that gets or sets the name of the associated contextual group.

* **IsContextualTabVisible**: A boolean property that indicates whether the ContextualTab is visible or not.

## Events

The **RadRibbonView** exposes two events related to the **RadRibbonTab** element:

* **PreviewSelectionChanged**: Occurs when a tab selection is about to be done. The event arguments are of type **RadSelectionChangedEventArgs** and expose the following members:

  * **AddedItems**: An **IList** collection which contains selected item.
  * **RemovedItems**: An **IList** collection which contains unselected item.

  > tip You can cancel the selection by setting the **RadSelectionChangedEventArgs's** **Handled** property to **True**.

#### **Example 2: Subscribing to PreviewSelectionChanged event**

```XAML
<telerik:RadRibbonView x:Name="radRibbonView" PreviewSelectionChanged="radRibbonView_PreviewSelectionChanged">
 ...
</telerik:RadRibbonView>
```

#### **Example 3: PreviewSelectionChanged event handler**

```C#
private void radRibbonView_PreviewSelectionChanged(object sender, RadSelectionChangedEventArgs e)
{
 // Get the ribbonView
 RadRibbonView ribbonView = sender as RadRibbonView;
 //Get the selected items
 IList selectedItems = e.AddedItems;
 //Get the unselected items
 IList unselectedItems = e.RemovedItems;
 // Cancel the selection
 e.Handled = true;
}
```

* **SelectionChanged**: Occurs RadRibbonTab is selected. The event arguments are of type **RadSelectionChangedEventArgs** and expose the following members:

  * **AddedItems**: An **IList** collection which contains selected item.
  * **RemovedItems**: An **IList** collection which contains unselected item.

#### **Example 2: Subscribing to SelectionChanged event**

```XAML
<telerik:RadRibbonView x:Name="radRibbonView" SelectionChanged="radRibbonView_SelectionChanged">
 ...
</telerik:RadRibbonView>
```

#### **Example 3: SelectionChanged Event Handler**

```C#
private void radRibbonView_SelectionChanged(object sender, RadSelectionChangedEventArgs e)
{
 // Get the ribbonView
 RadRibbonView ribbonView = sender as RadRibbonView;
 //Get the selected items
 IList selectedItems = e.AddedItems;
 //Get the unselected items
 IList unselectedItems = e.RemovedItems;
}
```

## See Also

* [RadRibbonGroup](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-group)