New to Telerik UI for WinUI? Download free 30-day trial

Getting Started

This tutorial will walk you through the creation of a sample application that contains a RadBadge control.

Assembly References

To use RadBadge or RadBadgeView, add references to the following assembly:

  • Telerik.WinUI.Controls.dll

Defining the RadBadge

Badge is the marker which is displayed to show notifications, statuses, etc.

You can access the RadBadge control through an alias pointing to the Telerik.UI.Xaml.Controls.Primitives namespace: xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"

Example 1: RadBadge

<primitives:RadBadge BadgeType="Default"/> 

Figure 1: RadBadge Example

RadBadge Example

Defining the RadBadgeView

RadBadgeView is a control in which you can add a content and position the badge based on this content.

You can access the RadBadgeView control through an alias pointing to the Telerik.UI.Xaml.Controls.Primitives namespace: xmlns:core="using:Telerik.UI.Xaml.Controls"

Example 2: RadBadgeView

<primitives:RadBadgeView BadgePosition="1,1" BadgeAnchorPosition="0,0.5" > 
    <Button Content="Click" Width="60" Height="30"/> 
    <primitives:RadBadgeView.Badge> 
        <primitives:RadBadge x:Name="badgeButton" Background="Violet" Content="678" Geometry="{core:Geometry Type=Ellipse}" Width="36" Height="24" /> 
    </primitives:RadBadgeView.Badge> 
</primitives:RadBadgeView> 

Figure 1: RadBadgeView Example

RadBadgeView Example

See Also

In this article
Not finding the help you need?