Animations

Updated on Mar 26, 2026

The Badge loads with an animation and plays an animation when it is updated (changed).

By default, the load and change animations are of the FadeAnimation type. To modify the animations of the Badge, use the RadAnimationManager.AnimationSelector property. Depending on the animation you need to change, you have to specify the AnimationName property to either LoadAnimation or ChangeAnimation.

The following example uses the xmlns:core="using:Telerik.UI.Xaml.Controls" , xmlns:animation="using:Telerik.Core", and xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives" namespaces.

Modify the Badge Animations

XAML

<primitives:RadBadgeView BadgePosition="1, 1" BadgeAnchorPosition="0, 0.5" Margin="20 50 20 0">
	<Button Content="button" Width="60" Height="30"/>
	<primitives:RadBadgeView.Badge>
		<primitives:RadBadge x:Name="badgeButton" Background="Orange" Content="678" Geometry="{core:Geometry Type=Ellipse}" Width="36" Height="24" >
			<animation:RadAnimationManager.AnimationSelector>
				<animation:RadAnimationSelector>
					<animation:RadScaleAnimation AnimationName="LoadAnimation" StartScaleX="0.1" EndScaleX="1.0" StartScaleY="0.1" EndScaleY="1.0" />
					<animation:RadScaleAnimation AnimationName="ChangeAnimation" StartScaleX="0.1" EndScaleX="1.0" StartScaleY="0.1" EndScaleY="1.0" />
				</animation:RadAnimationSelector>                            
			</animation:RadAnimationManager.AnimationSelector>
		</primitives:RadBadge>
	</primitives:RadBadgeView.Badge>
</primitives:RadBadgeView>

See Also

• Styling Options
• Badge Types