|
You can use the Font icon on SfTabView 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. |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
