Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (152).NET Core  (26)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (29)Blazor  (107)DocIO  (20)Essential JS 2  (72)Essential Studio  (164)File Formats  (20)Flutter  (114)JavaScript  (150)Microsoft  (102)PDF  (59)React  (33)Succinctly series  (124)Syncfusion  (490)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (27)Windows Forms  (55)WinUI  (27)WPF  (123)Xamarin  (132)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (108)Chart  (53)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (50)Development  (263)Doc  (7)DockingManager  (1)eBook  (94)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (15)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (232)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (25)Performance  (7)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (29)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (10)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (65)UI  (139)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (13)Web  (226)What's new  (146)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing New Badge Control for WPF

Introducing New Badge Control for WPF

We are happy to announce the availability of the WPF Badge control in our 2020 Volume 4 release. 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 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.
    <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.
    <Button 
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Content="Inbox" 
            Width="70" Height="40"/>
    </Button>
  5. Attach the Badge control to notify users of the unread count.
    <Button Content="Inbox">
        <syncfusion:SfBadge.Badge>
            <syncfusion:SfBadge Content="10+" />
        </syncfusion:SfBadge.Badge>
    </Button>

    WPF Button with Badge Control
    WPF Button with Badge Control

Badge alignment

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

<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
WPF Badge Aligned with Bottom-Right Corner

Badge anchor

The badge can be aligned within or outside the host control by using the HorizontalAnchor and VerticalAnchor properties.

<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
WPF Badge Anchored to the Button Control

Badge precise alignment

You can fine-tune the alignment of the Badge control using the HorizontalPosition, VerticalPosition, HorizontalAnchorPosition, and 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 to learn more about custom alignment.

<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
Badge Relatively Positioned on Differently Host Control Sizes

Badge shape

The Badge control comes with a predefined set of standard shapes. However, you can customize the shape of the badge by using the CustomShape property.

<Button Content="Inbox">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="28+" Shape="Ellipse"/>
    </syncfusion:SfBadge.Badge>
</Button>
Different Shapes of WPF Badge
Different Shapes of WPF Badge

Badge notification severity

To indicate the severity or priority of a notification, the Badge control comes with built-in fill options. Based on the current theme and selected fill, the foreground and background of the badge will be updated.

<Button Content="Primary">
    <syncfusion:SfBadge.Badge>
        <syncfusion:SfBadge Content="28+"
                            Fill="Error"/>
    </syncfusion:SfBadge.Badge>
</Button>
WPF Badge with Different Fill Colors
WPF Badge with Different Fill Colors

Badge animation

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

Badge animation
Badge animation

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
Badge Included in Ribbon and Docking Manager Elements

Integrate Badge with Ribbon control

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

<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.

<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 for WPF and all its customization features. You can learn more about it from its feature tour and user guide pages. You can also download examples of the control from this GitHub repository and try them out for yourself.

Syncfusion has over 90 essential WPF controls like a DataGridChartsDiagram, and PDF Viewer. Give these controls a shot by downloading the setup from our latest release. Our demos are now available in Microsoft Store, and .NET Core demos are available in the App Center.

For existing customers, the newest version is available for download from the license and downloads page. If you are not yet a customer, you can try our 30-day free trial 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 forumsfeedback portal, or Direct-Trac support system.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top