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 AvailableAwayDoNotDisturbOfflineOutOfOfficeDotAddRemoveRejected
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 a runnable example with the Badge Types scenario, see the SDKBrowser Demo Application and go to BadgeView -> Features category.