Getting Started with WPF Badge

18 Nov 201824 minutes to read

This section explains the steps required to add the WPF Badge control and its elements such as shapes, alignment and predefined colors. This section covers only basic features needed to get started with Syncfusion WPF Badge control.

Structure of WPF Badge control

WPF Badge Structure

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.

Refer to this documentation to find more details about installing nuget packages in a WPF application.

Adding WPF Badge via XAML

To add the WPF Badge manually in XAML, follow these steps:

  1. Create a new WPF project in Visual Studio.

  2. Add the following required assembly references to the project:

    • Syncfusion.Shared.WPF
    • Syncfusion.Tools.WPF

  3. Import Syncfusion® WPF schema http://schemas.syncfusion.com/wpf as the notification: namespace, and declare the WPF Badge in the XAML page.

    <Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:notification="http://schemas.syncfusion.com/wpf"
    mc:Ignorable="d">
    <Grid x:Name="grid">
        <notification:SfBadge Name="badge"/>
    </Grid>
</Window>

Adding WPF Badge via C#

To add the WPF Badge control manually in C#, follow these steps:

  1. Create a new WPF application via Visual Studio.

  2. Add the following assembly references to the project,

    • Syncfusion.Shared.WPF
    • Syncfusion.Tools.WPF

  3. Include the required namespaces, create an instance of WPF Badge, and add it to the window.

  4. Declare the WPF Badge control using C#.

    using Syncfusion.Windows.Controls.Notification;
   
namespace GettingStarted
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            // Creating an instance of the Badge control
            SfBadge badge = new SfBadge();
            grid.Children.Add(badge);
        }
    }
}

Adding WPF Badge for a Button

If you want to assign WPF Badge for any objects, create the WPF Badge and assign it to the SfBadge.Badge property. Before that you need to create a SfBadge.Badge object and add that object to the parent control.

Here, Badge control added for the Button control.

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge Content="10"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
//Creating Badge control
SfBadge sfBadge = new SfBadge();
sfBadge.Name = "badge";
sfBadge.Content = 10;

//Create button control as container for badge
Button button = new Button();
button.Width = 100;
button.Height = 50;
button.Content = "Primary";

//Assigning Badge control to button           
SfBadge.SetBadge(button, sfBadge);

WPF Badge Button

Download demo application from GitHub

Setting WPF Badge display content

If you want to set or change the display content of the WPF Badge, use the Content property. The default value of Content property is null.

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge Content="99+"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.Content = "99+";

WPF Badge Display Content

Download demo application from GitHub

Alignment of WPF Badge

You can align the WPF Badge either horizontally or vertically by using the HorizontalAlignment or VerticalAlignment properties. The default value of the HorizontalAlignment property is Right and the VerticalAlignment property is Top.

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge HorizontalAlignment="Left"
                              VerticalAlignment="Center"
                              Content="99+"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.HorizontalAlignment = HorizontalAlignment.Left;
badge.VerticalAlignment = VerticalAlignment.Center;
badge.Content = "99+";

WPF Badge Alignment

Download demo application from GitHub

Positioning of WPF Badge

You can change the horizontal or vertical position of the WPF Badge either inside, outside or in the middle by using the HorizontalAnchor and VerticalAnchor properties. The default value of HorizontalAnchor and VerticalAnchor properties is Center.

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge HorizontalAnchor="Outside"
                              VerticalAnchor="Center"
                              Content="10"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.HorizontalAnchor = BadgeAnchor.Outside;
badge.VerticalAnchor = BadgeAnchor.Center;
badge.Content = "10";

WPF Badge Position

Download demo application from GitHub

Place the WPF Badge any where on the container

If you want to place the WPF Badge anywhere on any shaped container, use the HorizontalPosition or VerticalPosition properties. The value range for HorizontalPosition and VerticalPosition properties is 0 to1. The default value of HorizontalPosition property is 1 and VerticalPosition property is 0.

For example, if you use any circular containers, you can easily place the WPF Badge anywhere by using the HorizontalPosition and VerticalPosition properties.

<Image Source="/Images/avatar.png"
       Width="100"
       Height="100" >
    <notification:SfBadge.Badge>
        <notification:SfBadge Shape="None"
                              HorizontalPosition="0.9"
                              VerticalPosition="0.8"
                              x:Name="badge">
            <notification:SfBadge.Content>
                <Ellipse Width="20"
                         Height="20"
                         Fill="LimeGreen"/>
            </notification:SfBadge.Content>
        </notification:SfBadge>
    </notification:SfBadge.Badge>
</Image>
badge.HorizontalPosition = 0.9;
badge.VerticalPosition = 0.8;

WPF Badge Custom Alignment

Download demo application from GitHub

Adding WPF Badge without BadgeContainer

You can directly add the WPF Badge to any objects without using the SfBadge.Badge container.

The C# sample below defines a MailItem class and a ViewModel that exposes a list of MailItem instances. Place both classes in your project (for example, in a Models folder) and add an xmlns:local namespace mapping in the XAML that points to the namespace where these classes live.

using System.Collections.Generic;

namespace GettingStarted.Models
{
    public class MailItem
    {
        public string ItemName { get; set; }
        public int? UnreadMessageCount { get; set; }
    }

    public class ViewModel
    {
        public List<MailItem> MailItems { get; set; }

        public ViewModel()
        {
            MailItems = new List<MailItem>
            {
                new MailItem { ItemName = "Inbox",         UnreadMessageCount = 20  },
                new MailItem { ItemName = "Drafts",        UnreadMessageCount = null },
                new MailItem { ItemName = "Sent Items",    UnreadMessageCount = 5   },
                new MailItem { ItemName = "Deleted Items", UnreadMessageCount = null },
                new MailItem { ItemName = "Junk Email",    UnreadMessageCount = null }
            };
        }
    }
}
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid>
    <ListView BorderThickness="1"
              BorderBrush="LightGray"
              ItemsSource="{Binding MailItems}" 
              SelectedIndex="0"
              VerticalAlignment="Center" 
              HorizontalAlignment="Center">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Grid.Column="0" 
                                      Content="{Binding ItemName}" 
                                      VerticalAlignment="Center"/>
                    <notification:SfBadge x:Name="badge4"
                                          Grid.Column="1" 
                                          Height="20" 
                                          Width="40" 
                                          Background="Orange"
                                          Content="{Binding UnreadMessageCount}"
                                          Shape="Oval"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

WPF Badge ListView Items

Download demo application from GitHub

Predefined colors for displaying the WPF Badge

You can change the background color of the WPF Badge by using the Fill property. Based on the value of the Fill property, the respective background color will be applied. The default value of the Fill property is Accent.

The Badge supports the following essential states:

Fill value Applied background
Accent DarkSlateBlue
Alt DarkSlateGray
Default WhiteSmoke
Error OrangeRed
Information RoyalBlue
Success Green
Warning Chocolate

WPF Badge Predefined Colors

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge Fill="Success"
                              Content="99+"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.Fill = BadgeFill.Success;
badge.Content = "99+";

WPF Badge Information States

Download demo application from GitHub

Predefined shapes for displaying the WPF Badge

You can change the default shape to either Rectangle, Oval, or Ellipse by using the Shape property. If you want to display the WPF Badge content without any default shape, use the Shape property value as None. The default value of the Shape property is Ellipse.

Shape value Description
Ellipse Circular badge. (default)
Oval Rounded-rectangle badge.
Rectangle Rectangular badge.
None No shape; only the badge content renders.

WPF Badge Predefined Shapes

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge Shape="Oval"
                              Content="99+"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.Shape = BadgeShape.Oval;
badge.Content = "99+";

WPF Oval Shaped Badge

Download demo application from GitHub

Animate when content changes

You can enable the Scale or Opacity based animation for displaying the WPF Badge text by using the AnimationType property. You can only see the animation when you change the text of the WPF Badge. The default value of the AnimationType property is None.

AnimationType value Description
None No animation. (default)
Scale Scale-in/scale-out animation.
Opacity Fade-in/fade-out animation. 
<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge AnimationType="Scale"
                              Shape="Ellipse"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>

<StackPanel Orientation="Vertical">
    <TextBlock Text="Badge content" 
               TextAlignment="Center" />
    <notification:UpDown MinValue="1"
                         MaxValue="10"
                         Step="1" 
                         NumberDecimalDigits="0"
                         Value="1"
                         x:Name="badgeContent"
                         ValueChanged="BadgeContent_ValueChanged"/>
</StackPanel>
badge.AnimationType = BadgeAnimationType.Scale;
badge.Shape = BadgeShape.Ellipse;
badgeContent.ValueChanged += BadgeContent_ValueChanged;
private void BadgeContent_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    this.badge.Content = Convert.ToInt32(e.NewValue).ToString();
}

Scaling based animation

WPF Badge Scale Based Animation

Opacity based animation

WPF Badge Opacity Based Animation

Download demo application from GitHub

Custom Content Formats

You can format the numbers which are displayed in the WPF Badge content by using conditional logic in an event handler or value converter. For example, you can display the number as 99+ for any value greater than or equal to 100.

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge x:Name="badge"
                              Shape="Ellipse"
                              AnimationType="None"/>
    </notification:SfBadge.Badge>
</Button>

<StackPanel Orientation="Vertical">
    <TextBlock Text="Badge content" 
               TextAlignment="Center" />
    <notification:UpDown MinValue="1"
                        MaxValue="10000000"
                        Step="1" 
                        NumberDecimalDigits="0"
                        Value="1"
                        x:Name="badgeContent"
                        ValueChanged="BadgeContent_ValueChanged"/>
</StackPanel>
badge.AnimationType = BadgeAnimationType.None;
badge.Shape = BadgeShape.Ellipse;
badgeContent.ValueChanged += BadgeContent_ValueChanged;
private void BadgeContent_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    int content_Value =Convert.ToInt32(e.NewValue);
    if (content_Value <= 99)
    {
        this.badge.Content = content_Value.ToString();
    }
    else if (content_Value <= 999)
    {
        this.badge.Content = "99+";
    }
    else if (content_Value < 99999)
    {
        this.badge.Content = (content_Value / 1000).ToString("0.#") + "K";
    }
    else if (content_Value < 999999)
    {
        this.badge.Content = (content_Value / 1000).ToString("#,0K");
    }
    else if (content_Value < 9999999)
    {
        this.badge.Content = (content_Value / 1000000).ToString("0.#") + "M";
    }
    else
    {
        this.badge.Content = (content_Value / 1000000).ToString("#,0M");
    }
}

WPF Badge Number Formatting

Download demo application from GitHub

Theme

The WPF Badge supports various built-in themes. Refer to the links below to apply themes,

WPF Badge Theme