CODEWITHSUNDEEP
c#wpfimagexamlanimation
Silberfab
Silberfab

Reputation: 65

Loading Animation Images

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

Upvotes: 1

Views: 623

Answers (3)

Silberfab
Silberfab

Reputation: 65

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}}"/>

Upvotes: 1

lbergnehr
lbergnehr

Reputation: 1598

If you want to change your GUI while performing other work, like downloading an image, you should download the image asynchronously.

There are several ways to do that, e.g. with the BackgroundWorkerclass (on a separate thread) or, depending on what you use to download the image, asynchronously on the same thread (which might be a better idea).

Upvotes: 0

Brembo
Brembo

Reputation: 1

You could add a WindowsFormHost to hold an animated gif and show/hide the host as necessary.

xmlns:winFormInteg="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
xmlns:winForms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"      

<winFormInteg:WindowsFormsHost
     Width="15"
     Height="15"
     Name="window_lading_anim"
     Loaded="OnWindowLoaded">
     <winForms:PictureBox x:Name="pictureBoxLoading"/>
</winFormInteg:WindowsFormsHost>

In the OnWindowLoaded method set the animated image in the Winform host control

private void OnWindowLoaded(object sender, RoutedEventArgs e)
{
  pictureBoxLoading.Image = Properties.Resources.myAnimatedGif;
}

Upvotes: 0

Related Questions