# .NET MAUI TabView Header Item Styling

The TabView control provides the built-in `HeaderItemStyle` property, which allows you to apply styling properties to the `TabViewHeaderItem`.

The following table summarizes the properties that you can apply to the `TabViewHeaderItem`:

| Property                  | Description                                                                                           |
| ------------------------- | ----------------------------------------------------------------------------------------------------- |
| `BackgroundColor`         | Specifies the background color of the header item.                                                    |
| `BorderColor`             | Specifies the border color of the header item.                                                        |
| `BorderThickness`         | Specifies the border thickness of the header item.                                                    |
| `CornerRadius`            | Specifies the corner radius of the header item.                                                       |
| `ContentPadding`          | Specifies the padding of the inner content of the header item.                                        |
| `TextColor`               | Specifies the color of the text in the header item.                                                   |
| `FontFamily`              | Specifies the font family of the text in the header item.                                             |
| `FontSize`                | Specifies the font size of the text in the header item.                                               |
| `FontAttributes`          | Specifies the font attributes of the text in the header item.                                         |
| `TextDecorations`         | Specifies the decorations of the text in the header item.                                             |
| `HorizontalTextAlignment` | Specifies the horizontal alignment of the text in the header item.                                    |
| `VerticalTextAlignment`   | Specifies the vertical alignment of the text in the header item.                                      |
| `ImageSource`             | Specifies the source of the image icon in the header item.                                            |
| `ImageAspect`             | Specifies the aspect of the image icon in the header item.                                            |
| `ImageWidth`              | Specifies the width of the image icon in the header item.                                             |
| `ImageHeight`             | Specifies the height of the image icon in the header item.                                            |
| `ImageSpacing`            | Specifies the spacing between the image icon and the text in the header item.                         |
| `ImagePosition`           | Specifies the position of the image icon relative to the text (`Left`, `Top`, `Right`, and `Bottom`). |

## Visual States

The `TabViewHeaderItem` provides the following `CommonStates` visual states:

| Visual States     | Description                                                                            |
| ----------------- | -------------------------------------------------------------------------------------- |
| `Normal`          | Applies when the header item is in normal state.                                       |
| `Focused`         | (Desktop-only) Applies when the header item is focused with the keyboard.              |
| `Selected`        | Applies when the header item is selected.                                              |
| `FocusedSelected` | (Desktop-only) Applies when the header item is selected and focused with the keyboard. |
| `Disabled`        | Applies when the header item is disabled.                                              |

The `Focused` visual state is used in keyboard navigation support and desktop scenarios.

## Example

The example below shows how to style the header item of the TabView:

```XAML
<telerik:RadTabView x:Name="tabView">
    <telerik:RadTabView.HeaderItemStyle>
        <Style TargetType="telerik:TabViewHeaderItem">
            <Setter Property="FontAttributes" Value="Italic"/>
            <Setter Property="TextColor" Value="#99000000" />
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" />
                        <VisualState Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="#61000000" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="#e05194" />
                                <Setter Property="BorderColor" Value="#e05194" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </telerik:RadTabView.HeaderItemStyle>
    <telerik:TabViewItem HeaderText="Home">
        <Label Margin="10" Text="This is the content of the Home tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="Folder">
        <Label Margin="10" Text="This is the content of the Folder tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="View">
        <Label Margin="10" Text="This is the content of the View tab" />
    </telerik:TabViewItem>
</telerik:RadTabView>
```

The example produces the following result:

![.NET MAUI TabView Header Item Style](https://www.telerik.com/maui-ui/documentation/assets/681d76635c2d189a3a1bc4e1d29ac0f6/styling-headeritemstyle.png)

> For a runnable example with the TabView `HeaderItemStyle` scenario, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to **TabView > Styling**.

## See Also

* [Styling the Header](https://www.telerik.com/maui-ui/documentation/controls/tabview/styling/header-styling)
* [Applying a StyleSelector to the Header Item](https://www.telerik.com/maui-ui/documentation/controls/tabview/styling/header-itemstyle-selector)
* [Styling the TabView Content](https://www.telerik.com/maui-ui/documentation/controls/tabview/styling/content-styling)