How to add an image to the Tab Header in UWP SfTabControl?

1 min read

This article describes how to add an image to the Tab Header in SfTabControl.

Use Icon property of SfTabItem to add an image to the Tab Header in SfTabControl.

ShowIcon

Set the ShowIcon property of SfTabControl as true to show the added image in the SfTabItem.

The following code example demonstrates the same.

XAML

<Syncfusion:SfTabControl ShowIcon="True" SelectedIndex="0" TabScrollButtonVisibility="Visible">
   <Syncfusion:SfTabItem Header="Google" Content="Google Web Search or simply Google is a web search engine developed by google.">
       <Syncfusion:SfTabItem.Icon>
           <Image Source="Icon1.jpg" Width="25" Height="25"></Image>
       </Syncfusion:SfTabItem.Icon>
   </Syncfusion:SfTabItem>
   <Syncfusion:SfTabItem Header="Microsoft" Content="The Mission of microsoft is to enable people and business throughout the world to realize their full potential.">
       <Syncfusion:SfTabItem.Icon>
           <Image Source="Icon2.png" Width="25" Height="25"></Image>
       </Syncfusion:SfTabItem.Icon>
   </Syncfusion:SfTabItem>
   <Syncfusion:SfTabItem Header="OneNote" Content="Microsoft OneNote is a Computer program for free-form informaton gathering.">
       <Syncfusion:SfTabItem.Icon>
           <Image Source="Icon3.png" Width="25" Height="25"></Image>
       </Syncfusion:SfTabItem.Icon>
   </Syncfusion:SfTabItem>
   <Syncfusion:SfTabItem Header="LinkedIn" Content="The purpose of LinkedIn is to help people network professionally.">
       <Syncfusion:SfTabItem.Icon>
           <Image Source="Icon4.png" Width="25" Height="25"></Image>
       </Syncfusion:SfTabItem.Icon>
   </Syncfusion:SfTabItem>
   <Syncfusion:SfTabItem Header="Microsoft Edge" Content="Microsoft edge is web browser developed by Microsoft."> 
       <Syncfusion:SfTabItem.Icon>
           <Image Source="Icon5.jpg" Width="25" Height="25" ></Image>
       </Syncfusion:SfTabItem.Icon>
   </Syncfusion:SfTabItem>
</Syncfusion:SfTabControl>

The output for the above code is shown below:

Conclusion

I hope you enjoyed learning about how to add an image to the Tab Header in UWP SfTabControl.

You can refer to our UWP Tab Control feature tour page to learn about its other groundbreaking feature representation documentation
to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)