How to set the background image for SfTabView

1 min read

Step 1: Create a sample for SfTabView.

Step 2: Create an Image property in the View and then set value. The Image property must be created inside the TabView Content.

The following code demonstrates how to set the background image for the SfTabView.

XAML:

 <tabView:SfTabView >
<tabView:SfTabItem Title="Call">
<tabView:SfTabItem.Content>                       
<Grid BackgroundColor="Green" x:Name="AllContactsGrid" >
<Image Source="movie1.png" HeightRequest="90" WidthRequest="90"/>
<Label Text="Welcome to the Syncfusion Support" VerticalOptions="Center" HeightRequest="50" WidthRequest="20"/>
</Grid>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="Favorites">
<tabView:SfTabItem.Content>                      
<Grid BackgroundColor="Gray" x:Name="FavoritesGrid" >
<Image Source="movie2.png" HeightRequest="90" WidthRequest="90"  />
 <Label Text="hai hello" VerticalOptions="Center" HeightRequest="50" WidthRequest="20"/>
</Grid>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="Contacts">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="Blue" x:Name="ContactsGrid">
<Image Source="movie3.png" HeightRequest="50" WidthRequest="20" />
<Label Text="third label" VerticalOptions="Center" HeightRequest="50" WidthRequest="20" />
</Grid>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>

Output:

Set background imae for SfTabVIew

Sample for set the background image for SfTabView: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_Background_image392135028

Did you find this information helpful?

Yes

Comments (0)

How to set the background image for SfTabView

XAML:

Output:

Access denied