https://github.com/syncfusionexamples/how-to-customize-the-tab-item-using-font-icon-along-with-header-text-in-.net-maui-tabview
This sample demonstrates, how to customize the TabItem using font icon along with header text in .NET MAUI TabView.
https://github.com/syncfusionexamples/how-to-customize-the-tab-item-using-font-icon-along-with-header-text-in-.net-maui-tabview
customization font-icon maui tab-item tab-view
Last synced: 2 months ago
JSON representation
This sample demonstrates, how to customize the TabItem using font icon along with header text in .NET MAUI TabView.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-customize-the-tab-item-using-font-icon-along-with-header-text-in-.net-maui-tabview
- Owner: SyncfusionExamples
- Created: 2024-05-24T11:40:58.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-25T04:28:55.000Z (about 1 year ago)
- Last Synced: 2025-02-08T20:47:50.559Z (4 months ago)
- Topics: customization, font-icon, maui, tab-item, tab-view
- Language: C#
- Homepage:
- Size: 600 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Overview**
When working with the [.NET MAUI TabView](https://www.syncfusion.com/maui-controls/maui-tab-view), you can enhance the user interface by adding font icons to the TabItems along with header text. This can be achieved by using the `FontImageSource` element within your XAML code. Below is a step-by-step guide on how to customize your TabItems with font icons.
**Adding Font Icons to TabItems**
To add font icons to your TabItems, you will need to use the `FontImageSource` element within each `SfTabItem`. Here's an example of how to do this:
```xml
```
In the above example, each `SfTabItem` has an `ImageSource` defined with a `FontImageSource`. The `Glyph` attribute is used to specify the icon, and the `Color` attribute is bound to the `TextColor` of the tab item, ensuring that the icon color matches the text color. The `FontFamily` should be set to the font that contains your icons, such as "MaterialDesignIcons" in this case.
**Binding the Icon Color**
To ensure that the icon color matches the text color of the tab, a binding is set up to reference the `TextColor` property of the `SfTabItem`. This is done using the `{Binding Source={x:Reference NameOfTabItem}, Path=TextColor}` syntax.
**Output**
