how to create loading animation

Question

I have many media elements in my application that are streamed via web. Sometimes I need to wait 2-3 seconds for that. That isn't a problem for me. The problem is that I don't know how to make some kind of animation of loading. I have an animated gif of loading bar but I don't know how to display it. Any ideas ?

Answer 1

You don't need a gif for it. There is a XAML Control ProgressRing. Bind it's IsActive property to a property which indicates that you are loading.

Something like:

public class DataService : BindableBase
{
    private bool _isLoading;

    public bool IsLoading 
    {
        get 
        {
            return _isLoading;
        }
        set 
        {
            SetProperty(ref _isLoading, "IsLoading");
        }
    }

    public void MyMethodWhichTakesLongTime() 
    {
        IsLoading = true;

        // Do some time consumption

        IsLoading = false;
    }
}

For the XAML something like:

<ProgressRing IsActive="{Binding IsLoading}" 
              DataContext="{Binding MyDataService}" 
              Width="50" 
              Height="50" />

Thanks to the binding (and the BindableBase which comes from the standard MS Templates (otherwise you need to implement INotifyPropertyChanged)) the ProgressRing will automatically get active, when your dataservice is doing something.