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


The Badge supports a set of built-in geometry types for styling its appearance and provides custom geometry types for rendering a custom styling logic.

  • Geometry—A property of type Geometry that gets or sets the geometry of the Badge component.

    The geometry markup extension supports the following geometries:

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

    Set the Built-In Badge Geometry

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

    Set a Custom Badge Geometry in Code

        public Example() 
            this.badgeButton.Geometry = GeometryFactory.GetGeometry(GeometryType.Hexagon); 
  • 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 change animation of the Badge.

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

Badge Geometries

WinUI RadBadge Telerik Badge Geometries

See Also

In this article
Not finding the help you need?