How to create TabView using custom FontIcon in Xamarin?
You can use the Font icon on Xamarin TabView header using the following steps:
Step 1: Add the necessary assemblies in the PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding SfTabView to your project.
Step 2: Add the necessary font ttf files on the respective project.
Add the following XAML code for adding the Font icon to all the platforms.
XAML:
<ContentPage.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="fontFamily" iOS="TabView" Android="TabView.ttf" WinPhone="TabView#TabView.ttf" /> </ResourceDictionary> </ContentPage.Resources>
Add the following code sample to add the SfTabView control with Font ttf on header.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SyncfusionTabView:SfTabView x:Name="ZayedTabView" Grid.Row="1" DisplayMode="Image" TabHeaderPosition="Bottom" EnableSwiping="false" VisibleHeaderCount="5">
<SyncfusionTabView:SfTabItem x:Name="tabHome" Title="A" FontIconFontFamily="{StaticResource fontFamily}" IconFont="C">
<SyncfusionTabView:SfTabItem.Content>
<Grid BackgroundColor="White" x:Name="AllContactsGrid" >
<ListView x:Name="ContactListView"
ItemsSource="{Binding ContactList}"
RowHeight="75">
<ListView.BindingContext>
<local:ContactsViewModel />
</ListView.BindingContext>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Margin="30,0,0,0">
<Label
Text="{Binding Name}"
FontSize="24"
/>
<Label
Text="{Binding Number}"
FontSize="20"
TextColor="LightSlateGray" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SyncfusionTabView:SfTabItem.Content>
</SyncfusionTabView:SfTabItem>
<SyncfusionTabView:SfTabItem x:Name="tabNews" Title="B" FontIconFontFamily="{StaticResource fontFamily}" IconFont="B" >
<SyncfusionTabView:SfTabItem.Content>
<Grid BackgroundColor="White" x:Name="AllContactsGrid1" >
<ListView x:Name="ContactListView1"
ItemsSource="{Binding ContactList}"
RowHeight="75">
<ListView.BindingContext>
<local:ContactsViewModel />
</ListView.BindingContext>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Margin="30,0,0,0">
<Label
Text="{Binding Name}"
FontSize="24"
/>
<Label
Text="{Binding Number}"
FontSize="20"
TextColor="LightSlateGray" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SyncfusionTabView:SfTabItem.Content>
</SyncfusionTabView:SfTabItem>
<SyncfusionTabView:SfTabItem x:Name="tabNew" Title="C" FontIconFontFamily="{StaticResource fontFamily}" IconFont="D" />
<SyncfusionTabView:SfTabItem x:Name="tabNotifications" Title="D" FontIconFontFamily="{StaticResource fontFamily}" IconFont="E" />
</SyncfusionTabView:SfTabView>
</Grid>
</ContentPage.Content>
Output image
Please find the sample from this link.
Conclusion
I hope you enjoyed learning about how to create TabView using custom FontIcon in Xamarin.
You can refer to our Xamarin.Forms TabView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
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!
