How to set the background Image in the content of TabItem in .NET MAUI Tab View?

To set the background image in the content of Tab items in the .NET MAUI Tab View, follow the given steps:

Step 1: Begin by initializing the Tab View in your .NET MAUI application and setting the necessary parameters.

Step 2: Inside the Tab View, create individual TabItems. Provide a distinct Header name for each TabItem, and define the Content that should appear within each tab.

Step 3: Incorporate images within the TabItems to enhance the content. Utilize the Image control to display PNG files, adjusting parameters as needed for each image.

By following these steps, you’ll be able to effectively set up the background image in the content of TabItems within a .NET MAUI Tab View.

XAML

<tabView:SfTabView x:Name="tabView"  
                   TabBarHeight="40" TabBarBackground="LightBlue">
    <tabView:SfTabView.Items>
        <tabView:SfTabItem x:Name="tabItem1"  Header="Food" >
            <tabView:SfTabItem.Content>
                <VerticalStackLayout Spacing="20" BackgroundColor="LightGray">
                    <Label Text="Nutrients" FontSize="Large" TextColor="Brown"/>
                    <Image Source="food.png" 
                           WidthRequest="170" HorizontalOptions="Start"/>
                </VerticalStackLayout>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <tabView:SfTabItem x:Name="tabItem2" Header="Animals" >
            <tabView:SfTabItem.Content>
                <VerticalStackLayout Spacing="20" BackgroundColor="LightGray" >
                    <Label Text="Elephant"  FontSize="Large" TextColor="Brown"/>
                    <Image Source="animals.png"  
                           WidthRequest="170" HorizontalOptions="Start"/>
                </VerticalStackLayout>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <tabView:SfTabItem x:Name="tabItem3" Header="Birds" >
            <tabView:SfTabItem.Content>
                <VerticalStackLayout Spacing="20" BackgroundColor="LightGray">
                    <Label  Text="Birds" FontSize="Large" TextColor="Brown"/>
                    <Image Source="birds.png"  
                           WidthRequest="170" HorizontalOptions="Start"/>
                </VerticalStackLayout>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView.Items>
</tabView:SfTabView>
            

Output:

Conclusion

I hope you enjoyed learning how to set the background image in the content of the Tab Item in the .NET MAUI Tab View (SfTabView)

You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!