title: Animate Image when loaded in Image Control
body: <p>I want to create a slideshow of images. For this I have loaded new images in image control after every set interval of time. But each time i load a new image it comes without any animation I need to load each image with a transition animation or fade in-out animation. How can I achieve animation while changing images in Image control? Following is the code:</p>
  
  <p><strong>XAML:</strong></p>
  
  <pre><code>&lt;Grid&gt;
  &lt;Image Source="{Binding CurrentImage}" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>XAML.cs</strong></p>
  
  <pre><code>ViewModel = new ScreenSaverViewModel();
  this.DataContext = ViewModel;
  </code></pre>
  
  <p>ViewModel.cs</p>
  
  <pre><code>/// &lt;summary&gt;
  /// Gets the current image to display on the attract screen. Changes to this property 
  /// cause the PropertyChanged event to be signaled
  /// &lt;/summary&gt;
  public string CurrentImage
  {
      get { return this.currentImage; }
      protected set
      {
          this.currentImage = value;
          this.OnPropertyChanged("CurrentImage");
      }
  }
  
  /// &lt;summary&gt;
  /// Gets the observable collection of all images.
  /// &lt;/summary&gt;
  public ObservableCollection&lt;string&gt; Images
  {
      get { return this.images; }
  }
  
  public ScreenSaverViewModel()
  {
      images = new ObservableCollection&lt;string&gt;();
  
      this.LoadSlideShowImages();
  
      if (Images != null &amp;&amp; Images.Count &gt; 0)
      {
          this.CurrentImage = this.Images[this.currentIndex];
  
          this.tickTimer = new DispatcherTimer();
          this.tickTimer.Interval = TimeSpan.FromMilliseconds(TimerIntervalMilliseconds);
          this.tickTimer.Tick += (s, e) =&gt;
          {
              this.currentIndex++;
              this.currentIndex = this.currentIndex &lt; this.Images.Count ? this.currentIndex : 0;
              this.CurrentImage = this.Images[this.currentIndex];
          };
  
          // start the timer after image is loaded
          this.tickTimer.Start();
      }
  }
  </code></pre>