How to set badge in Xamarin.Forms TabView header content?
In Xamarin.Forms Tabbed View control, the tab header can be customized to display Text, Image or Image with text options. Other than that, we can also customize to have a custom content in the header. This can be achieved using the Header content API of the TabItem class.
The following steps explains how to set badge in Xamarin.Forms SfTabView header.
Step 1: Create an app using Xamarin.Forms SfTabView with all the required assemblies.
Step 2: Initialize Xamarin.Forms SfTabView via XAML or C# code. In this example, Xamarin.Forms SfTabView has been initialized via XAML code.
<tabView:SfTabView BackgroundColor="#128c7e" VisibleHeaderCount="3">
<tabView:SfTabItem>
<tabView:SfTabItem.HeaderContent>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Label Text="Recent Calls" TextColor="White" FontSize="16" VerticalOptions="Center" HorizontalOptions="Center" />
<Grid HeightRequest="20" WidthRequest="20" VerticalOptions="Center" Grid.Column="1" HorizontalOptions="Center">
<Grid VerticalOptions="Center" HorizontalOptions="Center">
<Frame CornerRadius="10" BackgroundColor="Red" HasShadow="false" />
</Grid>
<Label Text="1" TextColor="White" FontSize="14" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>
</Grid>
</tabView:SfTabItem.HeaderContent>
<tabView: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>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
Step 3: When initializing the TabItem header content, add frame and label as header content of the TabItem.
<tabView:SfTabItem.HeaderContent> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="8*" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <Label Text="Recent Calls" TextColor="White" FontSize="16" VerticalOptions="Center" HorizontalOptions="Center" /> <Grid HeightRequest="20" WidthRequest="20" VerticalOptions="Center" Grid.Column="1" HorizontalOptions="Center"> <Grid VerticalOptions="Center" HorizontalOptions="Center"> <Frame CornerRadius="10" BackgroundColor="Red" HasShadow="false" /> </Grid> <Label Text="1" TextColor="White" FontSize="14" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" /> </Grid> </Grid> </tabView:SfTabItem.HeaderContent>
Output
You can find the sample from this link: Samples
Conclusion
I hope you enjoyed learning about how to set badge in Xamarin.Forms TabView header content.
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!
