Badge Types

The BadgeView supports a set of Badge indicator types.

To change and specify the Badge type, use the BadgeType(of type Telerik.Maui.Controls.Compatibility.Primitives.BadgeType) property, which exposes the following options:

• (Default) Default
• Available
• Away
• DoNotDisturb
• Offline
• OutOfOffice
• Dot
• Add
• Remove
• Rejected

The following example demonstrates how to set the type of the Badge indicator.

1. Define the BadgeView:

   <telerik:RadListView x:Name="listView" SelectionMode="None">
     <telerik:RadListView.ItemTemplate>
         <DataTemplate>
             <telerik:ListViewTemplateCell>
                 <VerticalStackLayout>
                     <telerik:RadBadgeView x:Name="badge"
                                                     BadgeVerticalPosition="End"
                                                     BadgeOffsetX="-15"
                                                     BadgeOffsetY="-10"
                                                     BadgeType="{Binding .}"
                                                     HorizontalOptions="Center"
                                                     VerticalOptions="Center">
                         <telerik:RadBadgeView.Content>
                             <Image WidthRequest="55" 
                                    HeightRequest="55"
                                    Source="avatar.png"/>
                         </telerik:RadBadgeView.Content>
                     </telerik:RadBadgeView>
                     <Label HorizontalOptions="Center"
                            FontSize="{OnPlatform iOS='13', MacCatalyst='13', Android='10'}"
                            Text="{Binding .}"/>
                 </VerticalStackLayout>
             </telerik:ListViewTemplateCell>
         </DataTemplate>
     </telerik:RadListView.ItemTemplate>
     <telerik:RadListView.ItemStyle>
         <telerik:ListViewItemStyle BackgroundColor="Transparent"/>
     </telerik:RadListView.ItemStyle>
     <telerik:RadListView.LayoutDefinition>
         <telerik:ListViewGridLayout HorizontalItemSpacing="5"
                                             VerticalItemSpacing="25"
                                             ItemLength="{OnPlatform iOS='80', MacCatalyst='80'}"
                                             SpanCount="4"/>
     </telerik:RadListView.LayoutDefinition>
   </telerik:RadListView>
   

2. Use the telerik namespace:

   xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"                    
   

   The following image shows the final result.

For the Badge Types example, go to the SDKBrowser Demo Application and navigate to BadgeView -> Features category.

See Also

• Configuration
• Badge Position, Alignment and Offset
• Badge Animation
• Styling
• Customization