# TabControl region

The `TabControlRegion` is a standard `switching elements region` that implements the adapter pattern in order to allow the user to add as `content` every XAML content.

The XAML `TabControl` element expects its children to be `TabItem` this is, from the user perspective, very uncomfortable.

It is much easier to deal with a standard `DependencyObject` and expect to be able to add that object as a `TabItem`. The `TabControlRegion` allows us to achieve that.

Allowing us to add a `DependencyObject`, such as a `UserControl`, as the content of a `TabControlRegion` solves only one the issues we have when using a `TabControl`. A `TabControl` is what we call a `headered` element meaning that each `TabItem` is composed by 2 different pieces: the `TabItem` content and the `TabItem` header. The `DependencyObject` we can add as content will be used as the `TabItem` content, in order to define the `TabItem` header we can use the `RegionHeaderedElement.Header` attached property, whose content will be used by the `TabControlRegion` as the `TabItem` header, such as in the following sample:

```
<UserControl x:Class="SampleView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:rg="http://schemas.radicalframework.com/windows/presentation/regions">
             <rg:RegionHeaderedElement.Header>
                <TextBlock Text="This will be used as header" />
             </rg:RegionHeaderedElement.Header>
   <!-- user control content here -->
</UserControl>
```

The header is not constrained to be a string but can be any valid XAML content.

## Header data context

The WPF `TabItem` element has a `Header` and a `Content` property. The value of the `RegionHeaderedElement.Header` attached property is added the `TabItem.Header` property, this means that by default in the generated visual tree the tab item content and the tab item header don't share the same `DataContext`. Assuming a `TabView` view and a corresponding `TabViewModel` the following code snippet won't work as expected:

```
<UserControl x:Class="TabView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:rg="http://schemas.radicalframework.com/windows/presentation/regions">
             <rg:RegionHeaderedElement.Header>
                <TextBlock Text="{Binding Path=PropertyOnTabViewMoodel}" />
             </rg:RegionHeaderedElement.Header>
   <!-- user control content here -->
</UserControl>
```

At runtime Radical creates a `TabViewModel` instance and binds it to the `TabView` UserControl. When the user control is added as content to the TabItem the header is extracted from the attached property, at this point the TabItem header DataContext is inherited from the TabControl DataContex and the `PropertyOnTabViewMoodel` property won't be found. To make so that the header content has the same DataContext as the user control the `PreserveOwningRegionDataContext` attached property can be used:

```
<UserControl x:Class="TabView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:rg="http://schemas.radicalframework.com/windows/presentation/regions"
             rg:RegionHeaderedElement.PreserveOwningRegionDataContext="true">
             <rg:RegionHeaderedElement.Header>
                <TextBlock Text="{Binding Path=PropertyOnTabViewMoodel}" />
             </rg:RegionHeaderedElement.Header>
   <!-- user control content here -->
</UserControl>
```

At runtime in the visual tree the TabItem header will have the user control DataContext. For backward compatibility reasons the default value of `PreserveOwningRegionDataContext` is `false`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.radicalframework.com/ui-composition/index/tabcontrol-region.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.