Question

I would like to know what is the best way to show a loading animation while downloading an image.

I have an image which is loaded dynamically from an internet URL. So I have about 1/2 second before seeing my image and i think it depends of the connection. So I would like to show an animation for the user while the image is still downloading.

Tanks for your suggestions

Answer 1

I finally solved my problem by using the VM (MVVM). I explain if someone have the same kind of trouble :

First I have Listbox in my view which is connected to a List in my ViewModel. What I did is connect a command to the event SelectionChanged like this :

<ListBox x:Name="EbookBox" ItemTemplate="{StaticResource ListItemTemplate}" Height="505" ItemsSource="{Binding OBooks, Mode=OneWay}" SelectedItem="{Binding SelectedBook, Mode=TwoWay}">
   <i:Interaction.Triggers>
      <i:EventTrigger EventName="SelectionChanged">
         <cmd:EventToCommand Command="{Binding LoadCoverCommand, Mode=OneWay}" />
      </i:EventTrigger>
   </i:Interaction.Triggers>
</ListBox>

Then in my function Load cover, I construct the url of the cover and I create a bitmapImage. But before, I initialize a boolean to say it’s loading :

IsLoadingCover = true;
// Create the Bitmap and save it to the caching directory
CurrentCover = new BitmapImage(new Uri(cover));
CurrentCover.DownloadCompleted += DownloadCompleted;

Finally when the image is download i put the loading indication to false.
And in my View, my control is only visible when IsLoadingCover is true (Bool to Visibility Converter) :

<control:LoadingAnimation HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,123,0,0" Visibility="{Binding IsLoadingCover,Converter={StaticResource BoolToVisibilityConverter}}"/>