How to create a custom animation?

[Pieter]

Hi,

I'm trying to create a custom busy indicator animation but it's not working. I'm following the steps mentioned in the doc (http://www.telerik.com/help/windows-phone/radbusyindicator-features-customanimations.html), but every time I run the project, the AnimationStyle1 loads instead.

Could someone attach a sample project running custom busy indicator animations please?

Best regards,

Pieter Voloshyn

[Deyan]

Hi Pieter,

Could you please share some further details on how exactly are you applying the custom animation containing style to RadBusyIndicator so that I can better understand the case? A XAML or C# code snippet would be very helpful.

Thanks for your time.

All the best,
Deyan
the Telerik team

[Pieter]

Hi Deyan,

The custom animation XAML is exactly the same as described in the URL I sent. I just rename its key to ColorWheelIndicatorAnimation.

<Style x:Key="ColorWheelIndicatorAnimation" TargetType="telerikPrimitivesBusyIndicator: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="#00BDD2"
                               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>

The RadBusyIndicator declaration follow below:

<telerikPrimitives:RadBusyIndicator
    x:Name="ProgressIndicator"
    Grid.Column="0"
    Grid.Row="0"
    IndicatorAnimationStyle="{StaticResource ColorWheelIndicatorAnimation}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    Visibility="Collapsed"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    HorizontalContentAlignment="Center"/>

Best regards,

Pieter Voloshyn

[Deyan]

Hello Pieter,

Thanks for writing back and for the requested details.

I have identified the reason for the undesired behavior that you experience and have logged the issue in our TODO system for fixing.

Currently, a possible workaround would be to programmatically set your custom animation style to the IndicatorAnimationStyle property in the Loaded event of RadBusyIndicator. You can still store your custom animation in the Resources dictionary of your main grid (the layout root which is automatically created when you create a new page). The code would look similar to this:

this.radBusyIndicator1.IndicatorAnimationStyle = this.LayoutRoot.Resources["MyCustomAnimation"] as Style;

I hope this helps.

I have updated your Telerik points for bringing our attention to this issue.

Do not hesitate to get back to us in case you have further questions or need assistance.

Best wishes,
Deyan
the Telerik team