How to Make a Silverlight Image Slide Show

There's a lot of websites out there with some very cool image slideshows. I figured I would take the time to write a short tutorial on how to make a basic image slideshow with fade in/out transitions between images.

First things first... The xaml...

<UserControl x:Class="ImageSlideshow.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <Storyboard x:Name="FadeOutAnimation">
            <DoubleAnimation Duration="00:00:00.50" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="theImage" />
        </Storyboard>
        <Storyboard x:Name="FadeInAnimation">
            <DoubleAnimation Duration="00:00:00.50" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="theImage" />
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Black">
        <Image x:Name="theImage" Stretch="Uniform"/>
    </Grid>
</UserControl>

This is all the xaml it takes to make a very basic slide show. The application itself consists of a Grid and an image inside the grid. I have set the Stretch property to Uniform so the image will take up the entire screen or as much of it as the aspect ratio of the image will allow. The other important piece here is the Resources section. The FadeInAnimation and FadeOutAnimation modify the image's Opacity property from 0 to 1 or 1 to 0 respectively.

On to the code behind.

Now, create a timer which will be used to transition between images. To initialize the timer, create a new event handler for the tick. Set the value of 'INTERVAL' to the number of seconds you wish to display each image.

timer.Interval = new TimeSpan(0, 0, 0, INTERVAL, 0);
timer.Tick += new EventHandler(timer_Tick);
timer.Start();

Now create an ObservableCollection of strings to hold the names of the images. Also create an integer to indicate which image is currently displayed.

private ObservableCollection<string> _images;
private int _currentIndex = 0;

To initialize the _images collection I created a separate method (good programming practice!)

private void InitializeImages()
{
     _images = new ObservableCollection<string>()
     {
          "Autumn Leaves.jpg",
          "Creek.jpg",
          "Desert Landscape.jpg",
          "Dock.jpg",
          "Forest Flowers.jpg",
          "Forest.jpg"
     };

     SetImageSource(_images[_currentIndex]);
}

These strings correspond to the names of the images I placed in a new directory I created in the solution named Images. Next, create a method named SetSource (which is the method I call at the end of the InitializeImages method). I separated this into a separate method because the code inside the method will be run over and over.

private void SetImageSource(string imageName)
{
     string name = "Images/" + imageName;
     BitmapImage bmi = new BitmapImage(new Uri(name, UriKind.Relative));
     theImage.Source = bmi;
}

All this method does is set the source of the image object to the image that has the name that is passed in as the input parameter. You cannot just set the images.Source property to the string passed in, you need to set it to a BitmapImage object which we can create based on the string passed in.

We're getting close! Now implement the timer's tick event handler

void timer_Tick(object sender, EventArgs e)
{
     _currentIndex++;

     if (_currentIndex == _images.Count)
     {
          _currentIndex = 0;
     }

     FadeOutAnimation.Begin();
}

Here, you increment the _currentIndex. If the index reaches the end of the list, simply set it back to zero. Once the index has been updated, fade out the image. Do this by calling the Begin method of the FadeOutAnimation defined in the xaml. The last thing that needs to be done is to define an even handler (in the class constructor) for the Completed event of the FadeOutAnimation. When the animation is finished, set the image source to the next image and fade the image back in by calling the FadeInAnimation's Begin method.

void FadeOutAnimation_Completed(object sender, EventArgs e)
{
     SetImageSource(_images[_currentIndex]);
     FadeInAnimation.Begin();
}

That's it! Not a lot of code! This could easily be modified to add some play, stop, pause, next, previous controls. It would also not take a lot of work to add different animations to change the transitions between the images. 

Good luck and have fun with this one!