Animation in .NET MAUI Badge View (SfBadgeView)

21 May 20253 minutes to read

Enable Animation

You can enable or disable the animation of the badge text using Scale or None enum values of the BadgeAnimation property. The animation becomes visible when you change the badge text.

XAML

<badge:SfBadgeView HorizontalOptions="Center"  WidthRequest="70" HeightRequest="70" BadgeText="6" 
                               VerticalOptions="Center">
        <badge:SfBadgeView.Content>
            <Image Source="BadgeFacebook.png" HeightRequest="70" WidthRequest="70"  />
        </badge:SfBadgeView.Content>
        <badge:SfBadgeView.BadgeSettings>
            <badge:BadgeSettings Type="Error" Animation="Scale" Offset="-12,6" Position="TopRight" />
        </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

C#

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.HeightRequest = 70;
sfBadgeView.WidthRequest = 70;
sfBadgeView.HorizontalOptions = LayoutOptions.Center;
sfBadgeView.VerticalOptions = LayoutOptions.Center;
sfBadgeView.BadgeText = "6";
Image image = new Image();
image.Source = "BadgeFacebook.png";
image.HeightRequest = 70;
image.WidthRequest = 70;
sfBadgeView.Content = image;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.Type = BadgeType.Error;
badgeSetting.Animation = BadgeAnimation.Scale;
badgeSetting.Offset = new Point(-12, 6);
badgeSetting.Position = BadgePosition.TopRight;
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;

AnimationDuration

The AnimationDuration property in the BadgeSettings of the Badge View can be used to set the animation speed based on your specified value. A smaller duration value accelerates the animation speed. The default value is 250.

XAML

<badge:SfBadgeView BadgeText="6">
        <badge:SfBadgeView.Content>
            <Image Source="BadgeFacebook.png" HeightRequest="70" WidthRequest="70"  />
        </badge:SfBadgeView.Content>
        <badge:SfBadgeView.BadgeSettings>
            <badge:BadgeSettings AnimationDuration="600" Animation="Scale"/>
        </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

C#

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "6";
Image image = new Image();
image.Source = "BadgeFacebook.png";
image.HeightRequest = 70;
image.WidthRequest = 70;
sfBadgeView.Content = image;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.Animation = BadgeAnimation.Scale;
badgeSetting.AnimationDuration = 600;
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;