Skip to main content

Badge Class

The Badge control displays a text in a badge over a visual element.

Namespace: DevExpress.Xpf.Core

Assembly: DevExpress.Xpf.Core.v24.1.dll

NuGet Package: DevExpress.Wpf.Core


public class Badge :

The following members return Badge objects:


Set the Badge.Badge attached property on a visual element to display a Badge control over the element:

WPF Badge Kind - Information

<Window x:Class="WPFApp.MainWindow"
  <Button Content="Inbox">
        <dx:Badge Content="10"/>

Custom Content Formats

The Badge.ContentStringFormat and Badge.ContentFormatProvider properties allow you to format the Badge‘s content. For example, you can display ‘99+’ instead of numbers equal to or greater than 100:

WPF Badges - ContentStringFormat Property

Refer to the Badge.ContentStringFormat or Badge.ContentFormatProvider property descriptions for a code sample.

Customize the Appearance


You can change a Badge size with the following properties:


You can use the following members to specify the Badge control’s position:


Predefined Shapes

Use the Badge.BadgeShape property to choose one of a Badge control’s shapes:

Value Name Figure

Custom Shapes

You can specify the Badge.CornerRadius property. When its value is not Null, the Badge control ignores the Badge.BadgeShape property.

The following code sample sets the radius of the Badge control’s top-left/top-right/bottom-right corners to 5 and the bottom-left corner to 0:

WPF Badges - CornerRadius is 5,5,5,0

<dx:SimpleButton ...>
    <dx:Badge Content="10" CornerRadius="5,5,5,0" />


Predefined Colors

Use the Badge.BadgeKind property to choose one of a predefined Badge colors:

Value Name Figure
BadgeKind.Error WPF Badge Kind - Error
BadgeKind.Information WPF Badge Kind - Information
BadgeKind.None WPF Badge Kind - None
BadgeKind.Success WPF Badge Kind - Success
BadgeKind.Warning WPF Badge Kind - Warning


The Badge control’s predefined colors depend on the application theme.

Custom Colors

You can change a Badge color with the following properties:

WPF Badges - Color Positions

The following code sample shows how to get the Badge control’s colors as on the figure above:

<Button ...>
    <dx:Badge Content="99+" BorderThickness="1" 
    BorderBrush="White" Foreground="#fff" Background="#f5222d"/>


Use the following properties to change the Badge fonts:

The following code sample sets the Badge.FontFamily property to Tahoma, Badge.FontSize property to 12, and Badge.FontWeight property to Thin:

WPF Badges - Font-related properties

<dx:SimpleButton ...>
    <dx:Badge Content="10" FontFamily="Tahoma" 
    FontSize="12" FontWeight="Thin" />


The Badge control has fade-in and fade-out animations. Use the Badge.AnimationDuration property to specify the animation duration. The following code sample sets the animation duration to 500ms:

WPF Badge - Animation Duration

<dx:SimpleButton ...>
    <dx:Badge Content="10" AnimationDuration="500" />
See Also