Customization

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.

<telerikPrimitives:RadBadgeView BadgeText="Badge Text">
    <telerikPrimitives:RadBadgeView.Content>
        <telerikPrimitives:RadBorder WidthRequest="80"
                                     HeightRequest="80"
                                     BorderThickness="1"
                                     BorderColor="LightGray">
            <Label Text="Telerik Badge View for MAUI"
                   FontSize="14"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"/>
        </telerikPrimitives:RadBorder>
    </telerikPrimitives:RadBadgeView.Content>
</telerikPrimitives: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="telerikPrimitives: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 following namespace:

    xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility"
    

    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:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility"
    

    The following image shows the final result.

Badge Custom Control Template

For a BadgeView ControlTemplate example, go to the FeaturesCategory folder in SDKBrowserMaui Demo Application/Examples/BadgeViewControl.

See Also

In this article
Not finding the help you need?