TabView with Background Image

Environment

Version	Product	Author
5.1.0	Telerik UI for .NET MAUI TabView	Dobrinka Yordanova

Description

This article shows how to add a transparency in the TabView to display the background image.

Solution

You have to add styles for the TabView Header, HeaderItem and Content.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             x:Class="MauiApp9.MainPage"
             BackgroundImageSource="dotnet_bot.png">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="telerik:TabViewHeaderItem" x:Key="headerStyle">
                <Setter Property="BackgroundColor" Value="Transparent"/>
            </Style>

            <Style TargetType="telerik:TabViewContent" x:Key="content">
                <Setter Property="BackgroundColor" Value="Transparent"/>
            </Style>

            <Style TargetType="telerik:TabViewHeader" x:Key="header" >
                <Setter Property="BackgroundColor" Value="Transparent"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <telerik:RadTabView HeaderItemStyle="{StaticResource headerStyle}"
                        HeaderStyle="{StaticResource header}"
                        ContentStyle="{StaticResource content}" x:Name="tabView" AutomationId="tabView" IsContentSwipeEnabled="False">
        <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>
</ContentPage>