Badge Animation

BadgeView allows you to display the badge indicator using animation. The following properties are related to the Badge animation feature:

BadgeAnimationType(enum of type Telerik.XamarinForms.Primitives.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(Xamarin.Forms.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.

this.badgeView.BadgeStartAnimationCommand.Execute(null);

Example

Here is the Animation properties set to the RadBadgeVierw control:

<telerikPrimitives:RadBadgeView BadgeAnimationDuration="900" 
                                VerticalOptions="Center"
                                HorizontalOptions="Center"
                                BadgeAnimationEasing="BounceOut"
                                BadgeType="Available">
    <telerikPrimitives:RadBadgeView.Content>
        <Image WidthRequest="60"
               HeightRequest="60"
               VerticalOptions="Center"
               HorizontalOptions="Center">
            <Image.Source >
                <OnPlatform x:TypeArguments="ImageSource" Default="sampleAvatar.png">
                    <On Platform="UWP">Assets\sampleAvatar.png</On>
                </OnPlatform>
            </Image.Source>
        </Image>
    </telerikPrimitives:RadBadgeView.Content>
</telerikPrimitives:RadBadgeView>

Badge Animation example is located inside the SDKBrowserApplication/Examples/BadgeViewControl/FeaturesCategory.

See Also

• Predefined Badges
• Badge Position and Alignment