Introducing New Badge Control for WPF
Tags: wpf, dotnet, csharp
Published: 2021-01-15 15:17:51

---
title: Introducing New Badge Control for WPF
published: true
date: 2021-01-13 10:33:20 UTC
tags: wpf, dotnet, csharp
canonical_url: https://www.syncfusion.com/blogs/post/introducing-new-badge-control-for-wpf.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Introducing-New-Badge-Control-for-WPF-672x372.png
---
We are happy to announce the availability of the [WPF Badge](https://help.syncfusion.com/wpf/badge/getting-started) control in our [2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download). This control comes in handy when you want to show notifications to your users. Depending on the content of the notifications, users may be prompted to perform some action. The following are some scenarios where badge notifications are useful:

- New messages in your inbox.
- A new version or update is available for your application.
- The availability of a person in a chat application.
- An error occurred during an upgrade process.

In this blog post, we will see how to add the Badge control to an application and discuss its customization options.

## Attaching the Badge to an element

Let’s cover how to add the Badge control as a notification over a button.

1. In Visual Studio, create a new WPF project.
2. Add the [Syncfusion.Tools.WPF](https://www.nuget.org/packages/Syncfusion.Tools.WPF/) NuGet package to the project reference.
3. Import the Syncfusion WPF schema. As shown in the following code sample, we used **syncfusion** as a prefix to the namespace.
```html
<Window 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:syncfusion="http://schemas.syncfusion.com/wpf"
</Window>
```
4. Add a button for which a notification is required.
```html
<Button 
        HorizontalAlignment="Center" VerticalAlignment="Center"
        Content="Inbox" 
        Width="70" Height="40"/>
</Button>
```
5. Attach the Badge control to notify users of the unread count.
```html
<Button Content="Inbox">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="10+" />
    </syncfusion:SfBadge.Badge>
</Button>
```

![WPF Button with Badge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/WPF-Button-with-Badge-Control.png)<figcaption>WPF Button with Badge Control</figcaption>

## Badge alignment

The Badge control can be placed at any corner of the button by using the **HorizontalAlignment** and **VerticalAlignment** properties.

```html
<Button Content="Mailbox">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="10"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Bottom"/>
    </syncfusion:SfBadge.Badge>
</Button>
```

![WPF Badge Aligned with Bottom-Right Corner](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/WPF-Badge-Aligned-with-Bottom-Right-Corner.png)<figcaption>WPF Badge Aligned with Bottom-Right Corner</figcaption>

## Badge anchor

The badge can be aligned within or outside the host control by using the **[HorizontalAnchor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalAnchor)** and **[VerticalAnchor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalAnchor)** properties.

```html
<Button Content="Mailbox">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="10"
                            HorizontalAnchor="Outside"
                            VerticalAnchor="Outside"/>
    </syncfusion:SfBadge.Badge>
</Button>
```

![WPF Badge Anchored to the Button Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/WPF-Badge-Anchored-to-the-Button-Control-1.png)<figcaption>WPF Badge Anchored to the Button Control</figcaption>

## Badge precise alignment

You can fine-tune the alignment of the Badge control using the **[HorizontalPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalPosition)**, **[VerticalPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalPosition)**, **[HorizontalAnchorPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalAnchorPosition)**, and **[VerticalAnchorPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalAnchorPosition)** properties. These are relative APIs where 0 represents the top or leftmost position, and 1 represents the bottom or rightmost position. This means that when the size of the host control is changed, the position of the badge is relatively aligned. Refer to our [documentation](https://help.syncfusion.com/wpf/badge/alignment-positioning) to learn more about custom alignment.

```html
<Image 
    Source="Assets/Badge/avatar.png">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge
            HorizontalAnchor="Custom"
            VerticalAnchor="Custom"
            HorizontalPosition="0.8"
            VerticalPosition="0.8"
            HorizontalAnchorPosition="0.5"
            VerticalAnchorPosition="0.5">
            <Ellipse 
                Width="20" 
                Height="20" 
                Fill="LimeGreen"/>
        </syncfusion:SfBadge>
    </syncfusion:SfBadge.Badge>
</Image>
```

![Badge Relatively Positioned on Differently Host Control Sizes](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Badge-Relatively-Positioned-on-Differently-Host-Control-Sizes.png)<figcaption>Badge Relatively Positioned on Differently Host Control Sizes</figcaption>

## Badge shape

The Badge control comes with a predefined set of standard [shapes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_Shape). However, you can customize the shape of the badge by using the [CustomShape](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_CustomShape) property.

```html
<Button Content="Inbox">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="28+" Shape="Ellipse"/>
    </syncfusion:SfBadge.Badge>
</Button>
```

![Different Shapes of WPF Badge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Different-Shapes-of-WPF-Badge.png)<figcaption>Different Shapes of WPF Badge</figcaption>

## Badge notification severity

To indicate the severity or priority of a notification, the Badge control comes with built-in [fill](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_Fill) options. Based on the current theme and selected fill, the foreground and background of the badge will be updated.

```html
<Button Content="Primary">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="28+"
                            Fill="Error"/>
    </syncfusion:SfBadge.Badge>
</Button>
```

![WPF Badge with Different Fill Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/WPF-Badge-with-Different-Fill-Colors.png)<figcaption>WPF Badge with Different Fill Colors</figcaption>

## Badge animation

The Badge control’s content changes are visually indicated using animations. The control comes with scaling and transparent animations.

![Badge animation](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Badge-animation.gif)<figcaption>Badge animation</figcaption>

## Integrated with controls

The Badge control can be attached to any UIElement, not just standard WPF controls. Let’s see how to show the Badge control in Ribbon and Docking Manager controls.

![Badge Included in Ribbon and Docking Manager Elements](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Badge-Included-in-Ribbon-and-Docking-Manager-Elements.png)<figcaption>Badge Included in Ribbon and Docking Manager Elements</figcaption>

### Integrate Badge with Ribbon control

The following code example integrates the Badge control with a Button control in the Ribbon control.

```html
<syncfusion:RibbonButton
    SizeForm="Large" 
    Label="Primary">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge
            FontSize="10"
            Height="15" 
            Width="26"
            Fill="Information"
            Shape="Oval"/>
    </syncfusion:SfBadge.Badge>
</syncfusion:RibbonButton>
```

### Integrate with Docking Manager

The following code example integrates the Badge control to customize the header of the Docking Manager using HeaderTemplate.

```html
<syncfusion:DockingManager
    UseDocumentContainer="True"
    x:Name="dockingManager" >
    <ContentControl 
        syncfusion:DockingManager.Header="Primary"
        syncfusion:DockingManager.State="Document">
        <syncfusion:DockingManager.HeaderTemplate>
            <DataTemplate>
                <Border Width="100">
                    <TextBlock Text="{Binding}" 
                                HorizontalAlignment="Left"/>
                    <syncfusion:SfBadge.Badge>
                        <syncfusion:SfBadge VerticalAlignment="Center"
                                            HorizontalAlignment="Right"
                                            FontSize="10"
                                            Padding="-20"
                                            Background="Orange"
                                            HorizontalAnchor="Inside"
                                            Content="43+"/>
                    </syncfusion:SfBadge.Badge>
                </Border>
            </DataTemplate>
        </syncfusion:DockingManager.HeaderTemplate>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="14">
            Primary mails are listed here.
        </TextBlock>
    </ContentControl>
</syncfusion:DockingManager>
```

## Conclusion

I hope you now have a clear picture of the [Syncfusion Badge control](https://help.syncfusion.com/wpf/badge/getting-started) for WPF and all its customization features. You can learn more about it from its [feature tour ](https://www.syncfusion.com/wpf-ui-controls/badge)and [user guide](https://help.syncfusion.com/wpf/badge/getting-started) pages. You can also download examples of the control from this [GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-badge-control-examples) repository and try them out for yourself.

Syncfusion has over 90 essential WPF controls like a [DataGrid](https://www.syncfusion.com/wpf-ui-controls/datagrid), [Charts](https://www.syncfusion.com/wpf-ui-controls/charts), [Diagram](https://www.syncfusion.com/wpf-ui-controls/diagram), and [PDF Viewer](https://www.syncfusion.com/wpf-ui-controls/pdf-viewer). Give these controls a shot by downloading the setup from our latest release. Our demos are now available in [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-wpf-controls-examples/9n99kdhrff6g), and .NET Core demos are available in the [App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/wpf-demos/distribution_groups/release).

For existing customers, the newest version is available for download from the [license and downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these new features.

Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [feedback portal](https://www.syncfusion.com/feedback), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents).