c# - Animate Image when loaded in Image Control -

i want create slideshow of images. have loaded new images in image control after every set interval of time. each time load new image comes without animation need load each image transition animation or fade in-out animation. how can achieve animation while changing images in image control? following code:

xaml:

<grid> <image source="{binding currentimage}" /> </grid> 

xaml.cs

viewmodel = new screensaverviewmodel(); this.datacontext = viewmodel; 

viewmodel.cs

/// <summary> /// gets current image display on attract screen. changes property  /// cause propertychanged event signaled /// </summary> public string currentimage {     { return this.currentimage; }     protected set     {         this.currentimage = value;         this.onpropertychanged("currentimage");     } }  /// <summary> /// gets observable collection of images. /// </summary> public observablecollection<string> images {     { return this.images; } }  public screensaverviewmodel() {     images = new observablecollection<string>();      this.loadslideshowimages();      if (images != null && images.count > 0)     {         this.currentimage = this.images[this.currentindex];          this.ticktimer = new dispatchertimer();         this.ticktimer.interval = timespan.frommilliseconds(timerintervalmilliseconds);         this.ticktimer.tick += (s, e) =>         {             this.currentindex++;             this.currentindex = this.currentindex < this.images.count ? this.currentindex : 0;             this.currentimage = this.images[this.currentindex];         };          // start timer after image loaded         this.ticktimer.start();     } } 

i have created class inheriting image control in have raised property change when source of image control changes. on have applied trigger works fine now. following code:

<controls:imagecontrol   source="{binding currentimage}" >             <controls:imagecontrol.triggers>                 <eventtrigger routedevent="controls:imagecontrol.sourcechanged">                     <beginstoryboard>                         <storyboard>                             <doubleanimation storyboard.targetproperty="(image.opacity)" from="0" to="1" duration="0:0:1" />                         </storyboard>                     </beginstoryboard>                 </eventtrigger>             </controls:imagecontrol.triggers>         </controls:imagecontrol>     public class imagecontrol : image     {         public static readonly routedevent sourcechangedevent = eventmanager.registerroutedevent(       "sourcechanged", routingstrategy.direct, typeof(routedeventhandler), typeof(imagecontrol));          static imagecontrol()         {             image.sourceproperty.overridemetadata(typeof(imagecontrol), new frameworkpropertymetadata(sourcepropertychanged));         }          public event routedeventhandler sourcechanged         {             add { addhandler(sourcechangedevent, value); }             remove { removehandler(sourcechangedevent, value); }         }          private static void sourcepropertychanged(dependencyobject obj, dependencypropertychangedeventargs e)         {             image image = obj image;             if (image != null)             {                 image.raiseevent(new routedeventargs(sourcechangedevent));             }         }     }