Skip to content

Commit 1ec925b

Browse files
Brundhasf3969Brundhasf3969
committed
Added the sample for TabView.
1 parent efd07ca commit 1ec925b

38 files changed

+1203
-2
lines changed

‎README.md‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,56 @@
1-
# How-to-customize-the-tab-item-using-font-icon-along-with-header-text-in-.NET-MAUI-TabView
2-
This sample demonstrates, how to customize the TabItem using font icon along with header text in .NET MAUI TabView.
1+
**Overview**
2+
3+
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.
4+
5+
**Adding Font Icons to TabItems**
6+
7+
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:
8+
9+
```xml
10+
<tabView:SfTabView x:Name="tabView" TabBarBackground="HotPink">
11+
<tabView:SfTabView.Items>
12+
<!-- TabItem with a Call icon -->
13+
<tabView:SfTabItem Header="Call" x:Name="callItem" ImagePosition="Left">
14+
<tabView:SfTabItem.ImageSource>
15+
<FontImageSource Glyph="&#xfeb6;" x:Name="call"
16+
Color="{Binding Source={x:Reference callItem},Path=TextColor}"
17+
FontFamily="MaterialDesignIcons"/>
18+
</tabView:SfTabItem.ImageSource>
19+
<!-- Content for the Call tab -->
20+
<!-- ... -->
21+
</tabView:SfTabItem>
22+
23+
<!-- TabItem with a Favourite icon -->
24+
<tabView:SfTabItem Header="Favourite" x:Name="favItem" ImagePosition="Left">
25+
<tabView:SfTabItem.ImageSource>
26+
<FontImageSource Glyph="&#xf2d1;" x:Name="fav"
27+
Color="{Binding Source={x:Reference favItem},Path=TextColor}"
28+
FontFamily="MaterialDesignIcons"/>
29+
</tabView:SfTabItem.ImageSource>
30+
<!-- Content for the Favourite tab -->
31+
<!-- ... -->
32+
</tabView:SfTabItem>
33+
34+
<!-- TabItem with a Contacts icon -->
35+
<tabView:SfTabItem Header="Contacts" x:Name="contactsItem" ImagePosition="Left">
36+
<tabView:SfTabItem.ImageSource>
37+
<FontImageSource Glyph="&#xf6ca;" x:Name="contacts"
38+
Color="{Binding Source={x:Reference contactsItem},Path=TextColor}"
39+
FontFamily="MaterialDesignIcons"/>
40+
</tabView:SfTabItem.ImageSource>
41+
<!-- Content for the Contacts tab -->
42+
<!-- ... -->
43+
</tabView:SfTabItem>
44+
</tabView:SfTabView.Items>
45+
</tabView:SfTabView>
46+
```
47+
48+
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.
49+
50+
**Binding the Icon Color**
51+
52+
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.
53+
54+
**Output**
55+
56+
![TabView.gif](https://support.syncfusion.com/kb/agent/attachment/article/16148/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzMjg4Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.6eV4XcYEXFVpu_dQvojG0xoORaJlB11x39K7ZJUVfIk)

‎TabViewSample/TabView.sln‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.8.34309.116
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TabView", "TabView\TabView.csproj", "{845B6413-7A86-4BD6-9DE7-7A82C538B56A}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
Release-Xml|Any CPU = Release-Xml|Any CPU
13+
EndGlobalSection
14+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
15+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
16+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Debug|Any CPU.Build.0 = Debug|Any CPU
17+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
18+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Release|Any CPU.ActiveCfg = Release|Any CPU
19+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Release|Any CPU.Build.0 = Release|Any CPU
20+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Release|Any CPU.Deploy.0 = Release|Any CPU
21+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Release-Xml|Any CPU.ActiveCfg = Release|Any CPU
22+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Release-Xml|Any CPU.Build.0 = Release|Any CPU
23+
{845B6413-7A86-4BD6-9DE7-7A82C538B56A}.Release-Xml|Any CPU.Deploy.0 = Release|Any CPU
24+
EndGlobalSection
25+
GlobalSection(SolutionProperties) = preSolution
26+
HideSolutionNode = FALSE
27+
EndGlobalSection
28+
GlobalSection(ExtensibilityGlobals) = postSolution
29+
SolutionGuid = {6EAFAEEF-A5D0-4ED5-BB4D-37A6646A5C06}
30+
EndGlobalSection
31+
EndGlobal

‎TabViewSample/TabView/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TabView"
5+
x:Class="TabView.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TabViewSample/TabView/App.xaml.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
namespace TabView
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
MainPage = new AppShell();
9+
}
10+
}
11+
}

‎TabViewSample/TabView/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TabView.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TabView"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="TabView">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TabViewSample/TabView/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TabView
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎TabViewSample/TabView/MainPage.xaml‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="TabView.MainPage"
5+
xmlns:local="clr-namespace:TabView"
6+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView">
7+
8+
<ContentPage.Resources>
9+
<Style TargetType="tabView:SfTabItem">
10+
<Setter Property="VisualStateManager.VisualStateGroups">
11+
<VisualStateGroupList>
12+
<VisualStateGroup>
13+
<VisualState x:Name="Normal" >
14+
<VisualState.Setters>
15+
<Setter Property="TextColor" Value="Brown" />
16+
</VisualState.Setters>
17+
</VisualState>
18+
<VisualState x:Name="Selected">
19+
<VisualState.Setters>
20+
<Setter Property="TextColor" Value="Green" />
21+
</VisualState.Setters>
22+
</VisualState>
23+
</VisualStateGroup>
24+
</VisualStateGroupList>
25+
</Setter>
26+
</Style>
27+
</ContentPage.Resources>
28+
29+
<tabView:SfTabView x:Name="tabView"
30+
TabBarBackground="HotPink">
31+
<tabView:SfTabView.Items>
32+
<tabView:SfTabItem Header="Call" x:Name="callItem"
33+
ImagePosition="Left">
34+
<tabView:SfTabItem.ImageSource>
35+
<FontImageSource Glyph="&#xfeb6;" x:Name="call"
36+
Color="{Binding Source={x:Reference callItem},Path=TextColor}"
37+
FontFamily="MaterialDesignIcons"/>
38+
</tabView:SfTabItem.ImageSource>
39+
<tabView:SfTabItem.Content>
40+
<ListView RowHeight="50">
41+
<ListView.ItemsSource>
42+
<x:Array Type="{x:Type x:String}">
43+
<x:String>James</x:String>
44+
<x:String>Richard</x:String>
45+
<x:String>Michael</x:String>
46+
<x:String>Alex</x:String>
47+
<x:String>Clara</x:String>
48+
</x:Array>
49+
</ListView.ItemsSource>
50+
<ListView.ItemTemplate>
51+
<DataTemplate>
52+
<ViewCell>
53+
<Grid Margin="10,5">
54+
<Label VerticalOptions="Start"
55+
HorizontalOptions="Start"
56+
TextColor="#666666"
57+
FontSize="16"
58+
Text="{Binding}" />
59+
</Grid>
60+
</ViewCell>
61+
</DataTemplate>
62+
</ListView.ItemTemplate>
63+
</ListView>
64+
</tabView:SfTabItem.Content>
65+
</tabView:SfTabItem>
66+
67+
<tabView:SfTabItem Header="Favourite" x:Name="favItem"
68+
ImagePosition="Left">
69+
<tabView:SfTabItem.ImageSource>
70+
<FontImageSource Glyph="&#xf2d1;" x:Name="fav"
71+
Color="{Binding Source={x:Reference favItem},Path=TextColor}"
72+
FontFamily="MaterialDesignIcons"/>
73+
</tabView:SfTabItem.ImageSource>
74+
<tabView:SfTabItem.Content>
75+
<ScrollView >
76+
<StackLayout Spacing="20" >
77+
<ListView RowHeight="50">
78+
<ListView.ItemsSource>
79+
<x:Array Type="{x:Type x:String}">
80+
<x:String>Steve</x:String>
81+
<x:String>Mark</x:String>
82+
<x:String>Alan</x:String>
83+
<x:String>Sandra</x:String>
84+
<x:String>Ryan</x:String>
85+
</x:Array>
86+
</ListView.ItemsSource>
87+
<ListView.ItemTemplate>
88+
<DataTemplate>
89+
<ViewCell>
90+
<Grid Margin="10,5">
91+
<Label VerticalOptions="Start"
92+
HorizontalOptions="Start"
93+
TextColor="#666666"
94+
FontSize="16"
95+
Text="{Binding}" />
96+
</Grid>
97+
</ViewCell>
98+
</DataTemplate>
99+
</ListView.ItemTemplate>
100+
</ListView>
101+
102+
</StackLayout>
103+
</ScrollView>
104+
</tabView:SfTabItem.Content>
105+
</tabView:SfTabItem>
106+
107+
<tabView:SfTabItem Header="Contacts" x:Name="contactsItem"
108+
ImagePosition="Left">
109+
<tabView:SfTabItem.ImageSource>
110+
<FontImageSource Glyph="&#xf6ca;" x:Name="contacts"
111+
Color="{Binding Source={x:Reference contactsItem},Path=TextColor}"
112+
FontFamily="MaterialDesignIcons"/>
113+
</tabView:SfTabItem.ImageSource>
114+
<tabView:SfTabItem.Content>
115+
<ListView RowHeight="50">
116+
<ListView.ItemsSource>
117+
<x:Array Type="{x:Type x:String}">
118+
<x:String>Sandra</x:String>
119+
<x:String>Ryan</x:String>
120+
<x:String>Michael</x:String>
121+
<x:String>Mark</x:String>
122+
<x:String>Clara</x:String>
123+
</x:Array>
124+
</ListView.ItemsSource>
125+
<ListView.ItemTemplate>
126+
<DataTemplate>
127+
<ViewCell>
128+
<Grid Margin="10,5">
129+
<Label VerticalOptions="Start"
130+
HorizontalOptions="Start"
131+
TextColor="#666666"
132+
FontSize="16"
133+
Text="{Binding}" />
134+
</Grid>
135+
</ViewCell>
136+
</DataTemplate>
137+
</ListView.ItemTemplate>
138+
</ListView>
139+
</tabView:SfTabItem.Content> </tabView:SfTabItem>
140+
</tabView:SfTabView.Items>
141+
</tabView:SfTabView>
142+
</ContentPage>

‎TabViewSample/TabView/MainPage.xaml.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
namespace TabView
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
11+
}

‎TabViewSample/TabView/MauiProgram.cs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using Syncfusion.Maui.Core.Hosting;
2+
using Microsoft.Extensions.Logging;
3+
4+
namespace TabView
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
fonts.AddFont("materialdesignicons-webfont.ttf", "MaterialDesignIcons");
19+
});
20+
21+
#if DEBUG
22+
builder.Logging.AddDebug();
23+
#endif
24+
25+
return builder.Build();
26+
}
27+
}
28+
}

‎TabViewSample/TabView/Platforms/Android/AndroidManifest.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

0 commit comments

Comments
 (0)