All docs
V20.1
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Badge Class

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

Namespace: DevExpress.Xpf.Core

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

Declaration

public class Badge :
    Freezable
Public Class Badge
    Inherits Freezable

Related API Members

The following members accept/return Badge objects:

Remarks

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"
  ....
  xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
  <Button Content="Inbox">
    <dx:Badge.Badge>
        <dx:Badge Content="10"/>
    </dx:Badge.Badge>
  </Button>
</Window>

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

Size

You can change a Badge size with the following properties:

Position

You can use two sets of properties to specify the Badge control's position:

Shapes

Predefined Shapes

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

Value Name Figure
BadgeShape.Pill
BadgeShape.Rectangle
BadgeShape.RoundedRectangle

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.Badge>
    <dx:Badge Content="10" CornerRadius="5,5,5,0" />
  </dx:Badge.Badge>
</dx:SimpleButton>

Colors

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
NOTE

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.Badge>
    <dx:Badge Content="99+" BorderThickness="1" 
    BorderBrush="White" Foreground="#fff" Background="#f5222d"/>
  </dx:Badge.Badge>
</Button>

Fonts

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.Badge>
    <dx:Badge Content="10" FontFamily="Tahoma" 
    FontSize="12" FontWeight="Thin" />
  </dx:Badge.Badge>
</dx:SimpleButton>

Animations

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.Badge>
    <dx:Badge Content="10" AnimationDuration="500" />
  </dx:Badge.Badge>
</dx:SimpleButton>
See Also