New to Telerik UI for WinUI? Download free 30-day trial

Custom Animations

Besides the out-of-the-box animations, you can create your own animations and integrate them with RadBusyIndicator. To do so, you need to create a style that targets the BusyIndicatorAnimation type and define a ControlTemplate that contains the animation. You can then set the already defined style to the IndicatorAnimationStyle property exposed by RadBusyIndicator.

Technically, RadBusyIndicator hosts its animation in a control which is part of its ControlTemplate. In order to apply a custom animation, you will need to define a style for this control and set a new ControlTemplate containing the custom visuals that will be animated. This ControlTemplate should meet two requirements:

  • Give the "PART_LayoutRoot" name of the root element of the template's visual tree.

  • Define the storyboard that will animate the visuals in the Resources dictionary of the root element and give the resource a key named "PART_Animation"

You can access the RadBusyIndicator control through an alias pointing to the Telerik.UI.Xaml.Controls.Primitives namespace: xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"

The following XAML code gives an example of how an animation providing style could be defined:

Example 1: Adding RadBusyIndicator in XAML

<primitives:RadBusyIndicator IsActive="True" x:Name="indicator" Grid.Row="1"> 
        <Style TargetType="indicator:BusyIndicatorAnimation"> 
            <Setter Property="Template"> 
                        <Grid VerticalAlignment="Center" x:Name="PART_LayoutRoot"> 
                                <Storyboard x:Name="PART_Animation"> 
                                    <DoubleAnimation From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" /> 
                                <RowDefinition /> 
                            <Grid Width="45" Height="45" Grid.Row="0" x:Name="LoadingVisual" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center"> 
                                        <RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5" /> 
                                <Path Stretch="Fill" Stroke="Red" StrokeThickness="5" StrokeStartLineCap="Round" Data="M1,0 A1,1,90,1,1,0,-1" /> 
                                <Path Margin="0,-5,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="10" Height="15" Stretch="Fill" Fill="#00BDD2" Data="M0,-1.1 L0.1,-1 L0,-0.9" StrokeThickness="1" /> 

Figure 1: Custom Animation

RadBusyIndicator Custom Animation

In this article
Not finding the help you need?