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.
-
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>
-
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.