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

Getting Started

This guide provides the information you need to start using the Telerik UI for WinUI Badge by adding the component to your project.

At the end, you will be able to achieve the following result.

RadBadgeView Example 1

Prerequisites

Before adding the Badge, you need to:

  1. Set up your WinUI project.

  2. Create your Telerik UI for WinUI application and install the Telerik UI for WinUI components depending on the required installation approach:

Add the Assembly References

To use the RadBadge and RadBadgeView components, add the references to the Telerik.WinUI.Controls.dll assembly.

Define the Component

The following example demonstrates how to define the Badge component. You can access the Badge through the xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives" alias that points to the Telerik.UI.Xaml.Controls.Primitives namespace.

Define the Badge

<primitives:RadBadge BadgeType="Default"/> 
The following image shows the end result.

RadBadge Example

Define the RadBadgeView

The RadBadgeView component is a container for adding the content of the Badge and its position based on this content.

The following example demonstrates how to define the RadBadgeView component. You can access the RadBadgeView component through the xmlns:core="using:Telerik.UI.Xaml.Controls" alias that points to the Telerik.UI.Xaml.Controls.Primitives namespace.

Define the 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> 
The following image show the end result.

RadBadgeView Example

See Also

In this article
Not finding the help you need?