Everything You Need to Know About WinUI Badge Control
Tags: winui, dotnet, csharp
Published: 2021-11-09 04:13:03

---
title: Everything You Need to Know About WinUI Badge Control
published: true
date: 2021-11-02 11:50:46 UTC
tags: winui, dotnet, csharp
canonical_url: https://www.syncfusion.com/blogs/post/everything-you-need-to-know-about-winui-badge-control.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Everything-You-Need-to-Know-About-WinUI-Badge-Control-672x372.png
---

When you want to show a notification that prompts your customers to act based on any of the following scenarios, then the badge control comes in handy:

- Message received in an application (chat apps).
- New version or an update to an app.
- Process status information.

The [WinUI Badge](https://www.syncfusion.com/winui-controls/badge "Link to WinUI Badge control") is a notification control. It is used to notify users about new or unread messages, notifications, status, and more. You can easily integrate it with controls like ListBox and Pivot.

In this blog post, we will learn how to integrate the WinUI Badge control and use its features in your application.

## Adding WinUI Badge to an element

Let’s create a button control and add the WinUI Badge Control to your application.

Follow these steps to add the WinUI Badge control manually in the XAML file:

1. First, create a project using the instructions provided in the [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Documentation link to create a new project that uses the Windows App SDK") documentation.
2. Then, install the latest [Syncfusion.Notifications.WinUI](https://www.nuget.org/packages/Syncfusion.Notifications.WinUI "Link to the Syncfusion.Notifications.WinUI NuGet Package") NuGet package in the project.
3. Now, import the **Syncfusion.UI.Xaml.Notifications** control namespace in the XAML page.
4. Finally, initialize the [BadgeContainer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.BadgeContainer.html "Link to the BadgeContainer Class of WinUI Badge Control") control. Assign the Badge control to its [Badge](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.BadgeContainer.html#Syncfusion_UI_Xaml_Notifications_BadgeContainer_Badge "Link to the Badge property of WinUI Badge Control") property and assign a button or any other host control to the  **Content** property.  
Refer to the following code.
```html
<Grid>
    <notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               >
        <notify:BadgeContainer.Badge>
            <notify:SfBadge
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Height="20"
                    Width="25"
                    Content="7"
            />
        </notify:BadgeContainer.Badge>
        <notify:BadgeContainer.Content>
            <Button Content="Outlook" Height="35" Width="130" />
        </notify:BadgeContainer.Content>
    </notify:BadgeContainer>
</Grid>
```

![Adding WinUI Badge control to a Button Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Adding-WinUI-Badge-control-to-a-Button-control.png)
<figcaption>Adding WinUI Badge control to a Button Control</figcaption>

## Change Badge alignment

The WinUI Badge control allows you to change its position to any corner of the host control using the **HorizontalAlignment** and **VerticalAlignment** properties.

Refer to the following code example.

```html
<Grid>
    <notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               >
        <notify:BadgeContainer.Badge>
            <notify:SfBadge
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    Height="20"
                    Width="25"
                    Content="7"
            />
        </notify:BadgeContainer.Badge>
        <notify:BadgeContainer.Content>
            <Button Content="Outlook" Height="35" Width="130" />
        </notify:BadgeContainer.Content>
    </notify:BadgeContainer>
</Grid>
```

![Changing the Alignment of WinUI Badge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Changing-the-Alignment-of-WinUI-Badge-Control.png)
<figcaption>Changing the Alignment of WinUI Badge Control</figcaption>

**Note:** For more details, refer to the [different alignment options in the WinUI Badge control documentation](https://help.syncfusion.com/winui/badge/alignment-positioning#alignment-of-badge " Documentation link to align the Badge").

## Change Badge position

Using the [HorizontalAnchor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_HorizontalAnchor "Link to the HorizontalAnchor property of WinUI Badge Control") and [VerticalAnchor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_VerticalAnchor "Link to the VerticalAnchor property of WinUI Badge Control") properties, you can move the Badge control horizontally or vertically inside, outside, or in the middle of the border in the host control.

The default value of the  **HorizontalAnchor** and **VerticalAnchor** properties is **Center**.

Refer to the following code example.

```html
<notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               >
    <notify:BadgeContainer.Badge>
        <notify:SfBadge
                HorizontalAnchor="Center"
                VerticalAnchor="Outside"
                    Height="20"
                    Width="25"
                    Content="7"
            />
    </notify:BadgeContainer.Badge>
    <notify:BadgeContainer.Content>
        <Button Content="Outlook" Height="35" Width="130" />
    </notify:BadgeContainer.Content>
</notify:BadgeContainer>
```

![Changing WinUI Badge Control Position](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Changing-WinUI-Badge-Control-Position.png)
<figcaption>Changing WinUI Badge Control Position</figcaption>

The Badge control also allows you to apply custom positions using the [HorizontalPosition](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_HorizontalPosition "Link to the HorizontalPosition property of WinUI Badge Control") and [VerticalPosition](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_VerticalPosition "Link to the VerticalPosition property of WinUI Badge Control") properties like in the following code example.

```html
<notify:BadgeContainer x:Name="container"
                               HorizontalAlignment="Center" VerticalAlignment="Center" >
    <notify:BadgeContainer.Badge>
        <notify:SfBadge Height="20" Width="20"
                                HorizontalAnchor="Custom"
                                VerticalAnchor="Custom"
                                HorizontalPosition="0.8"
                                VerticalPosition="0.1"
                                Content="7"
                                Shape="Ellipse" />
    </notify:BadgeContainer.Badge>
    <notify:BadgeContainer.Content>
        <Image Source="HostImage.png" Height="75" Width="75" />
    </notify:BadgeContainer.Content>
</notify:BadgeContainer>
```

![Custom Anchor Position in WinUI Badge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Custom-Anchor-Position-in-WinUI-Badge-Control.png)
<figcaption>Custom Anchor Position in WinUI Badge Control</figcaption>

**Note:** For more details, refer to the [predefined and custom positioning in the WinUI Badge control documentation](https://help.syncfusion.com/winui/badge/alignment-positioning#positioning-of-badge "Documentation link to position the Badge").

## Distinct and attractive colors

Use the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_Fill "Link to Fill property of WinUI Badge Control") property to apply distinctive colors to the background of the Badge control based on the status of the host control. This feature comes in handy when you need to prompt the users to act based on the application’s status.

Refer to the following code example.

```html
<notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               >
    <notify:BadgeContainer.Badge>
        <notify:SfBadge
                    Fill="Success"
                    Height="20"
                    Width="25"
                    Content="99+"
            />
    </notify:BadgeContainer.Badge>
    <notify:BadgeContainer.Content>
        <Button Content="Outlook" Height="35" Width="130" />
    </notify:BadgeContainer.Content>
</notify:BadgeContainer>
```

![Applying Background Color Based on the Host Status in WinUI Badge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Applying-Background-Color-Based-on-the-Host-Status-in-WinUI-Badge-Control.png)
<figcaption>Applying Background Color Based on the Host Status in WinUI Badge Control</figcaption>

## Predefined and custom shapes

You can change the shape of the Badge control using the predefined shapes available in the [Shape](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_Shape "Link to Shape property of WinUI Badge Control") property. Also, you can apply a custom shape using the [CustomShape](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_CustomShape "Link to the CustomShape property of WinUI Badge Control") property.

Refer to the following code example.

```html
<!--SfBadge with predefined shape-->
<notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               >
    <notify:BadgeContainer.Badge>
        <notify:SfBadge
                    Shape="Oval"
                    Height="20"
                    Width="25"
                    Content="7"
            />
    </notify:BadgeContainer.Badge>
    <notify:BadgeContainer.Content>
        <Button Content="Outlook" Height="35" Width="130" />
    </notify:BadgeContainer.Content>
</notify:BadgeContainer>

<!--SfBadge with custom shape-->
<notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               >
    <notify:BadgeContainer.Badge>
        <notify:SfBadge
                    Shape="Custom"
                    CustomShape="M16.057999,0C19.938004,1.2542023E-07 23.380997,2.294006 24.832001,5.7030019 25.012009,6.126006 25.421005,6.4270009 25.900009,6.5299977 29.384003,7.2799977 32,10.303007 32,13.912992 32,18.084988 28.512009,21.479 24.220001,21.479L5.697998,21.479C2.5550003,21.479 0,18.989986 0,15.936002 0,12.877989 2.5550003,10.39401 5.697998,10.39401 5.7389984,10.39401 5.7789993,10.39401 5.8199997,10.394987 6.2430038,10.406004 6.598999,10.093992 6.5740051,9.7049845 6.5650024,9.5490092 6.5600052,9.3930043 6.5600052,9.2369984 6.5600052,4.1430048 10.820999,1.2542023E-07 16.057999,0z"
                    Height="20"
                    Width="25"
                    Content="7"
            />
    </notify:BadgeContainer.Badge>
    <notify:BadgeContainer.Content>
        <Button Content="Outlook" Height="35" Width="130" />
    </notify:BadgeContainer.Content>
</notify:BadgeContainer>
```

![WinUI Badge Control with Predefined and Custom Shapes](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/WinUI-Badge-Control-with-Predefined-and-Custom-Shapes.png)
<figcaption>WinUI Badge Control with Predefined and Custom Shapes</figcaption>

## Set visual effects

Also, you can apply required animation or visual effects using the [AnimationType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Notifications.SfBadge.html#Syncfusion_UI_Xaml_Notifications_SfBadge_AnimationType "Link to AnimationType property of WinUI Badge Control") property based on the Opacity or Scale values.

Refer to the following code example.

```html
<notify:BadgeContainer Name="badgeContainer"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               >
    <notify:BadgeContainer.Badge>
        <notify:SfBadge
                    x:Name="sfBadge"
                    AnimationType="Scale"
                    Height="20"
                    Width="25"
                    Content="7"
            />
    </notify:BadgeContainer.Badge>
    <notify:BadgeContainer.Content>
        <Button Content="Outlook" Height="35" Width="130" />
    </notify:BadgeContainer.Content>
</notify:BadgeContainer>
```

![Setting Animation Effects in WinUI Badge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Setting-Animation-Effects-in-WinUI-Badge-Control.gif)
<figcaption>Setting Animation Effects in WinUI Badge Control</figcaption>

## Auto repositioning the badge

When a user resizes the application containing the host of the Badge control, then the Badge will automatically update its position to the assigned alignment position based on the host control’s size.

![Auto Positioning of WinUI Badge on Resizing the Host control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Auto-Positioning-of-WinUI-Badge-on-Resizing-the-Host-control.gif)
<figcaption>Auto Positioning of WinUI Badge on Resizing the Host control</figcaption>

## GitHub reference

Also, you can download the complete example for the [notification Badge control in WinUI](https://github.com/syncfusion/winui-demos/tree/master/notification "Link to WinUI Notification Badge control demo on GitHub").

## Conclusion

Thanks for reading! With these amazing features, we believe our [WinUI Badge control](https://www.syncfusion.com/winui-controls/badge "Link to WinUI Badge control") fits your expectations and requirements. Use this control to display a notification count, the number of unread messages in an email category, the status of product support, etc. To see more, you can download and check out [our demo app in the Windows Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "Link to Syncfusion WinUI demos on Windows Store").

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

You can also contact us through [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or the [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Everything You Need to Know About WinUI 3 Linear Gauge](https://dev.to/syncfusion/everything-you-need-to-know-about-winui-3-linear-gauge-43b7 "Link to Everything You Need to Know About WinUI 3 Linear Gauge blog")
- [Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI](https://dev.to/syncfusion/pick-colors-like-a-boss-using-syncfusion-color-controls-in-winui-e77 "Link to Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI blog")
- [Introducing the New WinUI 3 ComboBox](https://dev.to/kartik110895/introducing-the-new-winui-3-combobox-1p15-temp-slug-5893511 "Link to Introducing the New WinUI 3 ComboBox blog")
- [WinUI Scheduler: A Smart Tool to Handle Appointments in a Hospital](https://dev.to/karthickramasamy08/winui-scheduler-a-smart-tool-to-handle-appointments-in-a-hospital-90a-temp-slug-2163934 "Link to WinUI Scheduler: A Smart Tool to Handle Appointments in a Hospital blog")