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

Styling

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: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 type in code-behind, use the GeometryFactory.SetGeometry() method.

    Set a Custom Badge Geometry in Code

        public Example() 
        { 
            this.InitializeComponent(); 
            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

Telerik Badge Geometries

See Also

In this article
Not finding the help you need?