Styling

Updated on Mar 26, 2026

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

XAML

<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

C#

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

See Also

• Badge Animations
• Badge Types