How to create a custom animation?

Thread is closed for posting
4 posts, 0 answers
  1. Pieter
    Pieter avatar
    6 posts
    Member since:
    Jul 2011

    Posted 09 Aug 2011 Link to this post

    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
  2.
  3. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 10 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  5. Pieter
    Pieter avatar
    6 posts
    Member since:
    Jul 2011

    Posted 10 Aug 2011 Link to this post

    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

  7. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 11 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  8.
Back to Top