.NET MAUI BadgeView Animation

Updated on Aug 11, 2026

The BadgeView allows you to display the Badge indicator with an animation flow.

The following properties are related to the Badge animation feature:

• BadgeAnimationType(enum of type Telerik.Maui.Controls.BadgeView.BadgeAnimationType)—Specifies the type of the animation applied to the BadgeView. You can choose between two options: None and Scale. The default BadgeAnimationType is Scale.

• BadgeAnimationDuration(int)—Specifies the duration for the Badge animation in milliseconds. The default value is 300.

• BadgeAnimationEasing(Microsoft.Maui.Easing)—Specifies the easing of the badge animation. The default value is SinInOut.

• BadgeStartAnimationCommand(System.Windows.Input.ICommand)—Gets the command that starts the Badge animation.

C#

this.badgeView.BadgeStartAnimationCommand.Execute(null);

Example

The following example demonstrates how to set the Animation properties to the BadgeView:

XAML

<telerik:RadBadgeView x:Name="badgeView"
                                BadgeAnimationDuration="900" 
                                VerticalOptions="Center"
                                HorizontalOptions="Center"
                                BadgeType="Available">
    <telerik:RadBadgeView.Content>
        <Image WidthRequest="60"
               HeightRequest="60"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               Source="avatar.png"/>
    </telerik:RadBadgeView.Content>
</telerik:RadBadgeView>

For a runnable example with the BadgeView Animation scenario, see the SDKBrowser Demo Application and go to BadgeView > Features.

See Also

• Predefined Badges
• Badge Position and Alignment