How to add image in the header content of the SfTabView
Syncfusion TabView for Xamarin.Forms provides support to add images to the header content item. This documentation explains how to add an image inside the header of the TabView
The following steps explain how to add an image to the header content of the TabView.
Step 1: Create a TabView sample with all the required assemblies.
Step 2: Add the necessary images in the required folder to each project that has to be shown in the drop-down list
Android: Resource > drawable
iOS: Resource
UWP: Add the images inside the project.
Step 3: Add the tab items inside the TabView, set the images in the ImageSource property, and then provide ImageWithText for DisplayMode to show the header content with image and text.
Initialize the TabView control in the xaml page, in which add the tab items inside the TabView, and then add the required properties to display the image with text in the header.
XAML:
<ContentPage.Content> <StackLayout BackgroundColor="White"> <tabview:SfTabView x:Name="tabView" TabHeight="85" VisibleHeaderCount="3" DisplayMode="ImageWithText"> <tabview:SfTabView.Items> <tabview:SfTabItem Title="Home" x:Name="tab1" TitleFontSize="18" ImageSource="home.png" TitleFontColor="Gray"> <tabview:SfTabItem.Content> <Grid BackgroundColor="Red"> <Label Text="Welcome to first page" /> </Grid> </tabview:SfTabItem.Content> </tabview:SfTabItem> <tabview:SfTabItem Title="mail" x:Name="tab2" TitleFontSize="18" ImageSource="mail.png" TitleFontColor="Gray"> <tabview:SfTabItem.Content> <Grid BackgroundColor="Gray"> <Label Text="Welcome to Second page" /> </Grid> </tabview:SfTabItem.Content> </tabview:SfTabItem> <tabview:SfTabItem Title="contact" x:Name="tab3" TitleFontSize="18" ImageSource="phone.png" TitleFontColor="Gray"> <tabview:SfTabItem.Content> <Grid BackgroundColor="Blue"> <Label Text="Welcome to Third page" /> </Grid> </tabview:SfTabItem.Content> </tabview:SfTabItem> </tabview:SfTabView.Items> </tabview:SfTabView> </StackLayout> </ContentPage.Content>
Output:
| |
|
