Badge Control

Telerik UI for Xamarin Ninja image

The BadgeView is part of Telerik UI for Xamarin, a professional grade UI component library for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Badge vs BadgeView

Badge vs BadgeView

Badge is the marker which is displayed to show notifications, statuses, etc. The BadgeView is the control in which you can add a content and position the badge based on this content.

We recommend you use the BadgeView control

Badge Getting Started

<telerikPrimitives:Badge/>

Badge Features

Badge has the following properties:

  • Text(string): Defines the badge text.
  • TextColor(Xamarin.Forms.Color): Defines the text color of the badge.
  • TextMargin(Xamarin.Forms.Thickness): Defines the margin of the badge text.
  • FontSize(double): Defines the badge text font size.
  • FontFamily(string): Defines the badge text font family.
  • FontAttributes(FontAttributes): Defines the badge text font attributes.
  • BorderColor(Xamarin.Forms.Color): Defines the badge border color.
  • CornerRadius(Xamarin.Forms.Thickness): Defines the corner radius of the badge border.
  • BorderThickness(Xamarin.Forms.Thickness): Defines the badge border thickness.
  • AnimationType(Telerik.XamarinForms.Primitives.BadgeAnimationType). You can choose between Scale and None. The default value is Scale.
  • AnimationEasing(Xamarin.Forms.Easing): Defines the animation easing. For more details about different easing options check the Xamarin.Forms.Easing article. The default value is SinInOut.
  • AnimationDuration in milliseconds(int) Defines the animation duration in milliseconds. The default value is 300.
  • ControlTemplate(Xamarin.Forms.ControlTemplate): Specifies the Badge control template.

Badge ControlTemplate

Default ControlTemplate definition

<Style TargetType="telerikPrimitives:Badge">
    <Setter Property="ControlTemplate">
        <Setter.Value>
            <ControlTemplate>
                <!-- you can change the control tempalte in order to customize the bage default look  -->
                <telerikPrimitives:RadBorder BorderThickness="{TemplateBinding BorderThickness}"
                                             BorderColor="{TemplateBinding BorderColor}"
                                             CornerRadius="{TemplateBinding CornerRadius}"
                                             BackgroundColor="{TemplateBinding BackgroundColor}">
                    <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" />
                </telerikPrimitives:RadBorder>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Define the Badge:

<telerikPrimitives:Badge/>

Add the following namespace:

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

See Also

In this article
Not finding the help you need? Improve this article