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

Customizations in .NET MAUI BadgeView

If you don't want to use a predefined Badge type and need to customize the text inside the Badge indicator, use the BadgeText(string) property.

<telerik:RadBadgeView BadgeText="Badge Text">
    <telerik:RadBadgeView.Content>
        <telerik:RadBorder WidthRequest="80"
                                     HeightRequest="80"
                                     BorderThickness="1"
                                     BorderColor="LightGray">
            <Label Text="Telerik Badge View for MAUI"
                   FontSize="14"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"/>
        </telerik:RadBorder>
    </telerik:RadBadgeView.Content>
</telerik:RadBadgeView>

The following image shows the final result.

BadgeView Badge Text

ControlTemplate

The BadgeView supports a default ControlTemplate which you can customize.

To override the default control template, you need to set an implicit style with TargetType="telerik:Badge".

Use the Default ControlTemplate

To use the default ControlTemplate:

  1. Set the default ControlTemplate in the page resources:

    <Style TargetType="telerik:Badge">
      <Setter Property="ControlTemplate">
          <Setter.Value>
              <ControlTemplate>
                  <!-- you can change the control tempalte in order to customize the bage default look  -->
                  <telerik:RadBorder BorderThickness="{TemplateBinding BorderThickness}"
                                     BorderColor="{TemplateBinding BorderColor}"
                                     CornerRadius="{TemplateBinding CornerRadius}"
                                     BackgroundColor="{TemplateBinding BackgroundColor}"
                                     MinimumHeightRequest="{TemplateBinding MinimumHeightRequest}"
                                     MinimumWidthRequest="{TemplateBinding MinimumWidthRequest}">
                      <Label x:Name="PART_BadgeContent"
                             Text="{TemplateBinding Text}" 
                             TextColor="{TemplateBinding TextColor}"
                             Margin="{TemplateBinding TextMargin}"
                             FontSize="{TemplateBinding FontSize}"
                             FontFamily="{TemplateBinding FontFamily}"
                             FontAttributes="{TemplateBinding FontAttributes}"
                             HorizontalTextAlignment="Center"
                             VerticalTextAlignment="Center" />
                  </telerik:RadBorder>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
    </Style>
    
  2. The following snippet shows the BadgeView definition in XAML:

    <telerik:RadBadgeView VerticalOptions="Start"
                                  HorizontalOptions="Start">
      <telerik:RadBadgeView.Content>
          <BoxView BackgroundColor="LightGray"
                   VerticalOptions="Center"
                   WidthRequest="80"
                   HeightRequest="80"
                   HorizontalOptions="Center"/>
      </telerik:RadBadgeView.Content>
    </telerik:RadBadgeView>
    
  3. Add the telerik namespace:

    The following image shows the final result.

    Badge Default Control Template

    Use a Custom ControlTemplate

    To customize the ControlTemplate:

    1. Define the custom ControlTemplate in the page resources:

      <Style TargetType="telerik:Badge">
        <Setter Property="ControlTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <!-- you can change the control tempalte in order to customize the bage default look  -->
                    <telerik:RadBorder HeightRequest="30"
                                       WidthRequest="60"
                                       BackgroundColor="#0DA6FF"
                                       CornerRadius="15">
                        <Grid ColumnDefinitions="Auto, Auto" 
                              ColumnSpacing="0"
                              HorizontalOptions="Center">
                            <Label Text="&#xE809;"
                                   TextColor="White"
                                   VerticalOptions="Center"
                                   FontFamily="TelerikFont"/>
                            <Label Text="234"
                                   VerticalOptions="Center"
                                   Grid.Column="1"
                                   TextColor="White"/>
                        </Grid>
                    </telerik:RadBorder>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
      </Style>
      
    2. The following snippet shows the BadgeView definition in XAML:

      <telerik:RadBadgeView VerticalOptions="Start"
                                    HorizontalOptions="Start">
        <telerik:RadBadgeView.Content>
            <BoxView BackgroundColor="LightGray"
                     VerticalOptions="Center"
                     HorizontalOptions="Center"
                     WidthRequest="80"
                     HeightRequest="80"/>
        </telerik:RadBadgeView.Content>
      </telerik:RadBadgeView>
      
    3. Add the following namespace:

      xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
      

      The following image shows the final result.

    Badge Custom Control Template

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

    See Also

In this article
Not finding the help you need?