# Contextual Tabs

A contextual tab allows you to provide the users with a certain UI when they are in a specific context or they have selected a specific element. The contextual tabs are organized in groups, so that the user can see multiple tabs available for a specific context.

![WinUI RadRibbonView Rad Ribbon View Contextual Sample](https://www.telerik.com/winui/documentation/assets/31a94e9791781ab56db067193645e331/radribbonview_contextual_sample.png)

## Fundamentals

The contextual groups are used to display tabs with a context-specific functionality. They get displayed only when this functionality is needed. This way the common UI in the **RadRibbonView** becomes lighter while the specific functionality becomes easier to find as it is grouped and displayed on demand.

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

To define contextual tabs in the **RadRibbonView** control you have to first define their groups. You can do that declaratively, programmatically or by using data-binding through the following properties:

* **ContextualGroups**: Gets or sets a collection of **RadRibbonContextualGroups** used to generate the contextual groups. This collection can be populated declaratively in XAML or programmatically in code-behind.

#### **Example 1: Set the ContextualGroups property**

```XAML
<telerik:RadRibbonView x:Name="radRibbonView" 
					   Title="Document1"
					   ApplicationName="Telerik Word">
	<telerik:RadRibbonView.ContextualGroups>
		<telerik:RadRibbonContextualGroup x:Name="ContextualGroup1" Header="Group 1"/>
		<telerik:RadRibbonContextualGroup x:Name="ContextualGroup2" Header="Group 2"/>
	</telerik:RadRibbonView.ContextualGroups>
</telerik:RadRibbonView>
```

* **ContextualGroupsItemsSource**: Gets or sets an **IEnumerable** collection of **business items** used to generate the contextual groups. You can bind this property to a collection of data items in XAML or populate it in code-behind.

#### **Example 2: Set the ContextualGroups property**

```XAML
<telerik:RadRibbonView  ItemsSource="{Binding Tabs}" 
						ContextualGroupsItemsSource="{Binding ContextualGroups}" />
```

## Adding RadRibbonContextualGroup Declaratively

In order to add contextual tabs, you need to define **RadRibbonTabs** associated with contextual groups. The **RadRibbonTab** control exposes a **ContextualGroupName** property that allows you to associate it with a **ContextualGroup**.

> To activate **RadRibbonContextualGroup** you have to set its **IsActive** property to **True**.

#### **Example 3: Define RadRibbonTabs**

```XAML
<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="*" />
	</Grid.RowDefinitions>
	<telerik:RadRibbonView x:Name="radRibbonView" >
		<telerik:RadRibbonTab Header="Home" />
		<telerik:RadRibbonTab Header="Insert" />
		<telerik:RadRibbonTab Header="Page Layout" />
		<telerik:RadRibbonTab Header="References" />
		<telerik:RadRibbonTab Header="Mailings" />
		<telerik:RadRibbonTab Header="Review" />
		<telerik:RadRibbonTab Header="View" />
		<telerik:RadRibbonTab ContextualGroupName="ContextualGroup1" Header="ContextualTab 1.1" />
		<telerik:RadRibbonTab ContextualGroupName="ContextualGroup1" Header="ContextualTab 1.2" />
		<telerik:RadRibbonTab ContextualGroupName="ContextualGroup2" Header="ContextualTab 2.1" />
		<telerik:RadRibbonTab ContextualGroupName="ContextualGroup2" Header="ContextualTab 2.2" />
		<telerik:RadRibbonView.ContextualGroups>
			<telerik:RadRibbonContextualGroup x:Name="ContextualGroup1" Header="Group 1" IsActive="True"/>
			<telerik:RadRibbonContextualGroup x:Name="ContextualGroup2" Header="Group 2" IsActive="True"/>
		</telerik:RadRibbonView.ContextualGroups>
	</telerik:RadRibbonView>
</Grid>
```

It is important to set the **x:Name** property of all **RadRibbonContextualGroups** in the **RadRibbonView ContextualGroups** collection, otherwise you won't be able to associate any **RibbonTabs** with them.

## RibbonContextualGroup Properties

* **HeaderAlignment**: An enumeration property of type **HorizontalAlignment** that gets or sets the header's alignment of the contextual group.
* **Header**: A property of type **object** that gets or sets the header of the contextual group.
* **HeaderTemplate**:  A property of type **DataTemplate** that gets or sets the header's template of the contextual group.
* **Color**: A property of type **Brush** that gets or sets the base color used for the tabs header and content background brush. This color will not only be applied to the group's header, but to the header's of the tabs in this group.
* **IsActive**: A **boolean** property that gets or sets whether the group is active (visible) or not. This should be done when a certain requirement is met by the user. This requirement should specify whether the specific functionality in the contextual tab is needed. For example if you have a contextual tab that should manipulate images, you'd want to show this tab only when the user has selected an image.
* **SelectFirstTabOnActivation**: A **boolean** property that gets or sets whether the first contextual tab should be selected on activation of the group.

## Mouse Wheel Scrolling of Tabs

By default, scrolling the **mouse wheel** while the mouse is over the control will change the currently selected tab. You can disable this behavior by setting the **IsMouseWheelTabScrollingEnabled** property of the RadRibbonView control to **False**.

#### **Example 6: Disable mouse wheel scrolling in XAML**

```XAML
<telerik:RadRibbonView IsMouseWheelTabScrollingEnabled="False" />
```

## Prevent the Selection of a Contextual Tab When It Is Activated

By default, when a contextual tab is activated, the first tab element inside will be selected. To disable this behavior you can set the **SelectFirstTabOnActivation** property of the **RadRibbonContextualGroup** to **false**.

#### **Example 7: Disable selection of the first tab inside contextual tab**

```XAML
<telerik:RadRibbonContextualGroup x:Name="ContextualGroup1" Header="Group 1" SelectFirstTabOnActivation="False"/>
```

## See Also

* [Ribbon Tab](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-tab)