New to Telerik UI for .NET MAUI? Start a free 30-day trial

Styling

TabView provides means for modifying its visual appearance, so that it matches the style of the app. You can style different parts of the TabView - its header, items and content area.

Check the TabView Visual Structure topic for a visual representation of the TabView elements.

TabView Styling

You can use any of the following TabView properties to change its look&feel:

  • BackgroundColor
  • BorderColor
  • BorderThickness
  • CornerRadius
  • ContentPadding

In addition, TabView provides the listed below styling properties for modifying its elements - header, TabView items and content area.

  • HeaderStyle - specifies the style of the entire header area (border, background color etc.);
  • HeaderItemStyle - specifies the style of the individual header items (font, text color etc.)
  • ContentStyle - specifies the style of the entire content area (borders, background color etc.);

Header Styling

Through HeaderStyle property of the TabView you can modify the TabViewHeader. TabViewHeader provides the following properties:

  • BackgroundColor
  • BorderColor
  • BorderThickness
  • CornerRadius
  • ContentPadding

Check below a quick example:

<telerik:RadTabView x:Name="tabView">
    <telerik:RadTabView.HeaderStyle>
        <Style TargetType="telerik:TabViewHeader">
            <Setter Property="BackgroundColor" Value="#EBECF0" />
            <Setter Property="BorderColor" Value="#e05194" />
        </Style>
    </telerik:RadTabView.HeaderStyle>
    <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>

And the result is the following:

TabView Header Style

HeaderItem Styling

Through HeaderItemStyle property of the TabView the following styling properties can be applied to the TabViewHeaderItem:

  • 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, Bottom)
<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>

Here is the TabView after applying the HeaderItemStyle:

TabView HeaderItem Style

Content Styling

TabView's ContentStyle property allows you to style the content area. TabViewContent provides the following properties:

  • BackgroundColor
  • BorderColor
  • BorderThickness
  • CornerRadius
  • ContentPadding
<telerik:RadTabView x:Name="tabView"
                    HeaderSpacing="10">
    <telerik:RadTabView.ContentStyle>
        <Style TargetType="telerik:TabViewContent">
            <Setter Property="BackgroundColor" Value="#EBECF0" />
            <Setter Property="BorderColor" Value="#623FEA" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="10"/>
        </Style>
    </telerik:RadTabView.ContentStyle>
    <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 image below shows TabView after applying ContentStyle:

TabView Content Style

See Also

In this article
Not finding the help you need?