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

Animations

The BusyIndicator comes with a set of predefined animations and also enables you to create custom ones.

Predefined Animations

To change the default animation of the BusyIndicator, set its AnimationStyle property. The primitives namespace in the following example points to xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives".

Set the AnimationStyle

<primitives:RadBusyIndicator IsActive="True" AnimationStyle="AnimationStyle1"/> 

The AnimationStyle property is of type enum with the same name and provides the following values:

  • (Default) AnimationStyle1

    RadBusyIndicator Animation Style 1

  • AnimationStyle2

    RadBusyIndicator Animation Style 2

  • AnimationStyle3

    RadBusyIndicator Animation Style 3

  • AnimationStyle4

    RadBusyIndicator Animation Style 4

  • AnimationStyle5

    RadBusyIndicator Animation Style 5

  • AnimationStyle6

    RadBusyIndicator Animation Style 6

  • AnimationStyle7

    RadBusyIndicator Animation Style 7

  • AnimationStyle8

    RadBusyIndicator Animation Style 8

  • AnimationStyle9

    RadBusyIndicator Animation Style 9

Custom Animations

To implement a custom animation:

  1. Ceate a custom ControlTemplate for the BusyIndicatorAnimation control.

  2. In the ControlTemplate, define whatever elements and animations you need.

  3. Use the IndicatorAnimationStyle property of the RadBusyIndicator to apply the customized template.

To ensure that the customized ControlTemplate won't break the internal logic of the BusyIndicatorAnimation control, you will need to preserve the elements from the default template with "PART_" in their x:Name settings. Based on this statement, you have to set the x:Name of the root element in the template to PART_LayoutRoot. Make sure that the Resources of the panel contain a Storyboard with an x:Name set to PART_Animation.

The following example shows how to create a custom animation using a customized template.

Create a custom animation

<primitives:RadBusyIndicator IsActive="True" x:Name="indicator"> 
    <primitives:RadBusyIndicator.IndicatorAnimationStyle> 
        <Style TargetType="indicator:BusyIndicatorAnimation"> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate> 
                        <Grid VerticalAlignment="Center" x:Name="PART_LayoutRoot"> 
                            <Grid.Resources> 
                                <Storyboard x:Name="PART_Animation"> 
                                    <DoubleAnimation From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" /> 
                                </Storyboard> 
                            </Grid.Resources> 
                            <Grid.RowDefinitions> 
                                <RowDefinition /> 
                            </Grid.RowDefinitions> 
                            <Grid Width="45" Height="45" Grid.Row="0" x:Name="LoadingVisual" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center"> 
                                <Grid.RenderTransform> 
                                    <TransformGroup> 
                                        <RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5" /> 
                                    </TransformGroup> 
                                </Grid.RenderTransform> 
                                <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" /> 
                            </Grid> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </primitives:RadBusyIndicator.IndicatorAnimationStyle> 
</primitives:RadBusyIndicator> 
The following image shows the result.

RadBusyIndicator Custom Animation

In this article
Not finding the help you need?