Badge Types
The BadgeView supports a set of Badge indicator types.
To change and specify the Badge type, use the BadgeType
(of type Telerik.XamarinForms.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 following namespace:
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility" xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.Maui.Controls.Compatibility" xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.Maui.Controls.Compatibility"
The following image shows the final result.
For the Badge Types example, go to the SDKBrowser Demo Application and navigate to BadgeView -> Features category.