Wait Animation

[Sanjeev]

Hi,

I would like to know how to get access to the wait animation that Telerik uses in the demo? I would like to have the same thing in my application when i get data from the DB asynchrounously so that the user knows that something is happening in the background.

Regards,
Sanjeev

[Kalin Milanov]

Hello Sanjeev,

Attached I am sending you a sample solution which contains the wait animations for all three themes we support in Telerik Silverlight control suite (Office_Black, Vista and Summer).

I am hoping that this will suit your case.

All the best,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Sanjeev]

Hello Kalin,

Thanks a lot for your reply.

How do i make use of the 3 xaml pages you sent me. i.e how do i call them from my page?

Thanks,
Sanjeev.

[Matthew]

I tried this with no success:

VisualStateManager.GoToState(this, "Loading", true);

So I'm guessing there is more to the story.  I'll be waiting as well.  Thanks

[Kalin Milanov]

Hello Matthew,

In order to use this animation you will need to implement visual states which will handle your scenario. 
For RadGridView we are using the following attributes to define the visual states:

[TemplateVisualState(Name = "Loading", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Idle", GroupName = "CommonStates")]

We override OnApplyTemplate method to handle the initial state:

public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this.ChangeVisualState(true);

        }

Then we implement the ChangeVisualState method to handle the state changes:

private void ChangeVisualState(bool useTransitions)
        {
            if (this.Visibility == Visibility.Collapsed)
                GridVisualStates.GoToState(this, useTransitions, "Idle" );
            else
                GridVisualStates.GoToState(this, useTransitions, "Loading" );
        }

I am hoping this will help your case. 

Also you can check out this article for more detailed overview on VisualStateManager.

Regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Mark Huck]

Is there a sample implementation of the wait animation for WPF? Thanks!

[Kalin Milanov]

Hi Mark Huck,

The imeplementation of the loading indicator in the grid is done entirely in XAML via binding to the IsBusy property of the grid.

In the template of the RadGridView:

<Trigger Property="IsBusy" Value="True">
    <Setter TargetName="PART_GridViewLoadingIndicator" Property="Visibility" Value="Visible"/>
</Trigger>

In the template of the loading indicator using controls:

<Storyboard x:Key="FadeIn">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BusyIndicatorBackground" Storyboard.TargetProperty="Opacity">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="BusyAnimation" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BusyIndicator" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="180"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Trigger Property="Visibility" Value="Visible">
    <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource BusyAnimation}" x:Name="Animation" />
        <BeginStoryboard Storyboard="{StaticResource FadeIn}" x:Name="Fade" />
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <StopStoryboard BeginStoryboardName="Animation" />
        <StopStoryboard BeginStoryboardName="Fade" />
    </Trigger.ExitActions>
</Trigger>

Sincerely yours,
Kalin Milanov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Huck]

Thanks, Kalin!

I'm using WPFToolkit for vsm

xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"

 

 

However, VisualStateGroups does not appear to be available. Can you suggest where to find this class?

 

 

 

 

[Kalin Milanov]

Hello Mark Huck,

If you want to do this with the VSM from the toolkit you will have to handle the IsBusy property of the grid in C# and use the VisualStateManager.GoToState to call for the state you want. Once you do that you can define your states in XAML and use them.

Regards,
Kalin Milanov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sanjiv]

Hi Guys,

Is it possible to have a working solution demonstrating this?

Regards,
Sanjeev.

[Vlad]

Hi,

 Why not use our new BusyIndicator?

All the best,
Vlad
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.