Skip to content

This repository contains a sample explaining how to customize badge appearance in .NET MAUI TabView.

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-Customize-Badge-Appearance-in-.NET-MAUI-TabView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

This article explains how to customize the badge appearance in the .NET MAUI TabView.

To fully customize the badge in the TabView, you can set the Type property in BadgeSettings to None. This allows you to customize the badge beyond predefined styles by explicitly specifying properties such as Background and TextColor.

<ContentPage ...
             xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView">
    <tabView:SfTabView x:Name="tabView" >
        <tabView:SfTabView.Items>
            <tabView:SfTabItem Header="Call" BadgeText="3">
                <tabView:SfTabItem.BadgeSettings>
                    <core:BadgeSettings Type="None" Background="GreenYellow" TextColor="Red" TextPadding="3"/>
                </tabView:SfTabItem.BadgeSettings>
                <tabView:SfTabItem.Content>
                    <ListView RowHeight="50">
                        <ListView.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>James</x:String>
                                <x:String>Richard</x:String>
                                <x:String>Michael</x:String>
                                <x:String>Alex</x:String>
                                <x:String>Clara</x:String>
                            </x:Array>
                        </ListView.ItemsSource>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Grid Margin="10,5">
                                        <Label VerticalOptions="Start"
                                                        HorizontalOptions="Start"
                                                        TextColor="#666666"
                                                        FontSize="16"
                                                        Text="{Binding}" />
                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
        </tabView:SfTabView.Items>
    </tabView:SfTabView>
</ContentPage>

By setting Type to None in BadgeSettings, you gain complete control over the appearance of the badge in TabView.

Output

Badge_TabView.png

About

This repository contains a sample explaining how to customize badge appearance in .NET MAUI TabView.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages