.NET MAUI BadgeView Animation

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