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

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

Badge Types

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

See Also

In this article
Not finding the help you need?