New to Telerik UI for .NET MAUI? Start a free 30-day trial

Badge Types

The BadgeView supports a set of Badge indicator types.

Badge Types

To change and specify the Badge type, use the BadgeType(of type Telerik.Maui.Controls.BadgeView.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.

Badge Types

For a runnable example with the Badge Types scenario, see the SDKBrowser Demo Application and go to BadgeView -> Features category.

See Also

In this article