Making a generic loading animation in mvvm

Question

i have a mvvm app that retrieve a lot of data from remote server. i wanna add an animation while data is being loaded what best way of doing that.

Answer 1

Hopefully you might have a DataTemplate for the Object want to display. Make sure you have already bind an Empty instance of the same to the UI so that DataTemplate instantiated prior to the data load. Let the Object has an IsLoaded/IsRefreshed property. Then you can write DataTrigger for the DataTemplate to start and stop Loading(or data refresh) animation while IsLoaded changes from VM, once it is true you can make the Animation visuals collapsed(Or a slow fade animation)so that all the data will be displayed nicely.

I have an old blog doing somethig similar here http://jobijoy.blogspot.com/2009/07/easy-way-to-update-all-ui-property.html, Another tip which might be useful to you is, Raise NotifypropertyChanged event with null as PropertyChangedEventArgs will tell all the Property bindings of the Datatemplate to refresh.

Answer 2

One way to this is to have a property in the view model named IsLoadingData. You can then bind it to the Visibility property of a control that hosts the animation, using a BooleanToVisibilityConverter.

Visibility={Binding 
    Path=IsLoadingData, 
    Converter={StaticResource BooleanToVisibilityConverter}}

This control can then use a ControlTemplate to start a Storyboard containing the animation when the VisibilityProperty is set to true.

<ControlTemplate.Triggers>
    <Trigger Property="IsVisible" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard 
                x:Name="Storyboard0" 
                Storyboard="{StaticResource Animation0}" 
                />
        </Trigger.EnterActions>
    </Trigger>
</ControlTemplate.Triggers>

For a sample of this animation please see my blog post containing the full source.