New to Telerik UI for WinUI? Download free 30-day trial

Key Properties

This article will list the key properties provided by the RadBadge and RadBadgeView control.

RadBadge Properties

  • BadgeType: A property of type BadgeType that gets or sets the badge type of the badge control. The BadgeType is an enumeration and it allows the following values:

    • Default
    • DotOnly
    • Available
    • DoNotDisturb
    • Rejected
    • Remove
    • Offline
    • Away
    • OutOfOffice
    • Add
    • ContentOnly

Figure 1: RadBadge Types

Telerik Badge Types

  • Geometry: A property of type Geometry that gets or sets the geometry of the badge control. You can apply one of the following geometries which our geometry markup extension provides.

    • Circle
    • Ellipse
    • Rectangle
    • Square
    • Triangle
    • RightTriangle
    • Pentagon
    • Hexagon
    • Heptagon
    • Octagon
    • Star5
    • Cloud

Example 1: Set Build-In Geometry

<primitives:RadBadgeView Grid.Row="0" Grid.Column="4" BadgePosition="1, 0"  VerticalAlignment="Center" HorizontalAlignment="Center" > 
    <Button Content="Triangle"  Foreground="Black" /> 
    <primitives:RadBadgeView.Badge> 
        <primitives:RadBadge x:Name="badgeButton" Background="Orange" Content="99" Foreground="Black"  Geometry="{core:Geometry Type=Triangle}"  /> 
    </primitives:RadBadgeView.Badge> 
</primitives:RadBadgeView> 
To apply a geometry in code-behind, you can use the GeometryFactory.SetGeometry() method.

Example 2: Set Custom Geometry In Code

public Example() 
{ 
    this.InitializeComponent(); 
    this.badgeButton.Geometry = GeometryFactory.GetGeometry(GeometryType.Hexagon); 
} 

Figure 2: Geometries

Telerik Badge Geometries

  • Stroke: A property of type Brush that gets or sets the stroke color of the badge.

  • StrokeThickness: A property of type double that gets or sets the stroke thickness of the badge.

  • StrokeDashArray: A property of type DoubleCollection that gets or sets the stroke dash array of the badge.

  • TextAlignment: An enumeration property of type Microsoft.UI.Xaml.TextAlignment that gets or sets the text alignment of the underlying TextBlock.

  • PlayChangeAnimationCommand: A property of type ICommand that gets or sets the play change animation of the badge.

  • InheritDataContext: A property of type bool that gets or sets a value indicating whether the badge should take the data context from its target element.

RadBadgeView Properties

  • BadgePosition: A property of type Point that gets or sets the relative position of the badge to the target content object.

    The RadBadge control uses its center point for positioning it relative to the attached element.

  • AnchorPosition: A property of type Point that gets or sets the anchor position of the badge, relative to the size of the badge control. Default value is (0.5, 0.5).

Change Badge Animation

By default, the RadBadge control is load and change with an animation. The load\change animations are FadeAnimation by default. If you want to change/modify the animations of the RadBadge control you can use the RadAnimationManager.AnimationSelector attached property. The AnimationName property needs to be specified to either LoadAnimation or ChangeAnimation depending on which animation you want to change/modify.

Example 3 uses the following namespaces: xmlns:core="using:Telerik.UI.Xaml.Controls" , xmlns:animation="using:Telerik.Core", xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"

Example 3: Modify Badge Animations

<primitives:RadBadgeView BadgePosition="1, 1" BadgeAnchorPosition="0, 0.5" Margin="20 50 20 0"> 
    <Button Content="button" Width="60" Height="30"/> 
    <primitives:RadBadgeView.Badge> 
        <primitives:RadBadge x:Name="badgeButton" Background="Orange" Content="678" Geometry="{core:Geometry Type=Ellipse}" Width="36" Height="24" > 
            <animation:RadAnimationManager.AnimationSelector> 
                <animation:RadAnimationSelector> 
                    <animation:RadScaleAnimation AnimationName="LoadAnimation" StartScaleX="0.1" EndScaleX="1.0" StartScaleY="0.1" EndScaleY="1.0" /> 
                    <animation:RadScaleAnimation AnimationName="ChangeAnimation" StartScaleX="0.1" EndScaleX="1.0" StartScaleY="0.1" EndScaleY="1.0" /> 
                </animation:RadAnimationSelector>                             
            </animation:RadAnimationManager.AnimationSelector> 
        </primitives:RadBadge> 
    </primitives:RadBadgeView.Badge> 
</primitives:RadBadgeView> 
In this article
Not finding the help you need?