Silverlight 3: Slideshow

• Download source - 2.94 MB

Introduction

Wow! I am so excited about sharing this Slideshow with you! Not because it’s the greatest in the world, but because it’s (not only) the first Silverlight Slideshow that I've created, but it’s also my first Silverlight user control that I've created!

But before I begin, let me show you a couple of great Silverlight Slideshows that I found:

• Mike Swanson’s Blog 
• Andrew Arnott’s Blog
• Koen Zwikstra’s Blog

Now, I actually tried using these slideshows before I ever decided to create my own, because they are beautiful slideshows! The only problem with them is that they have to be embedded directly in an ASP.NET webpage, which means, they cannot be embedded in a Silverlight UserControl (*.xaml). That’s frustrating! Especially if you, like me, have an entire Silverlight 3 website, and need the slideshow to be able to work in a Silverlight UserControl.

Creating a Silverlight Website

The first thing we'll do is create a Silverlight website that we can use to test our Slideshow in. So, fire up Visual Studio 2008… 

• Click on the File menu | New | Project…

When the “New Project” window opens, perform the following actions:

• In the Project Type TreeView, expand the Visual Basic node, then click on the Silverlight node.
• Select the Silverlight Application from the Template ListView.
• Make sure you have the “.NET Framework 3.5” selected. 
• Name the project “SlideShowTest”. 
• Click the OK button when you're ready.

Here’s what mine looks like:

After you click the “OK” button, the following “New Silverlight Application” window will open. Just click the “OK” button to accept the default settings, and create the solution.

Download the Source Code

If you haven't done it already, download the “SlideShow Class Library” source code to your computer. The source code is in a zip file, so open the zip file and extract the SlideShow Project into the “SlideShowTest” solution folder.

Adding the Project

After you have downloaded the source code and extracted it into the solution folder, add it as a reference to your project: 

• Click on the File menu | Add | Existing Project… 
• When the “Add Existing Project” window opens, browse to the “SlideShowTest” solution folder, then to the “SlideShow” folder, and select “SlideShow.vbproj”.

If you've added the project successfully, then the Solution Explorer should now look like this:

After you have added the project, you need to add a reference to it:

• In Solution Explorer, Right-Click on the “SlideShowTest” project node, then select “Add Reference…” from the popup menu. 
• When the “Add Reference” window opens, click the “Projects” tab, then select “SlideShow”, and click the “OK” button.

Add Your Images

Next, right-click on the “images” folder, in the SlideShow project, and select Add | Existing Item… and then add all of the images you want to view in your slideshow.

Just as a note, you don't have to add images if you don't want to. If you have the URLs to images on the web, and would like to view them in your slideshow, then you can use those URLs instead of local images. I've added several images to mine, as you can see:

After you add your images, right-click on the SlideShowControl and select View Code. In the AddImages() method, add the URLs to your images as follows:

' Add the URLs of your images here.
'
' This is the only sub that you need to update.
'
Private Sub AddImages()

    'Add the images to be displayed here.
    ImageList.Add("images/Blue hills.jpg")
    ImageList.Add("images/Sunset.jpg")
    ImageList.Add("images/Water lilies.jpg")
    ImageList.Add("images/Winter.jpg")

    'You can also add URLs to images on the web
    ImageList.Add("http://tiny.cc/NX6Kv")

End Sub  'AddImages 

Adding the ContentGrid

Once you have your images in place, you are ready to add a grid to the MainPage.xaml user control in the SlideShowTest project, for hosting the Slideshow. So, double-click on the MainPage.xaml user control to open the design view. Then, drag a Grid from the ToolBox onto the XAML designer, and name it ContentGrid as follows:

<Grid x:Name="LayoutRoot">
    <Grid x:Name="ContentGrid"> 
          
    </Grid> 
</Grid> 

Save and build your project.

Wiring It Up

After you've added the ContentGrid, you are ready to wire up the SlideShowControl. So, right-click on the XAML designer, and select “View Code” to open the code window.

Then, in the New() constructor method, create a new instance of the SlideShowControl, and add it to the SlideShowControl to the ContentGrid.Children collection.

Partial Public Class MainPage 
    Inherits UserControl
 
    Public Sub New() 
        InitializeComponent() 

        Dim ssc As New SlideShow.SlideShowControl() 
        Me.ContentGrid.Children.Add(ssc) 

    End Sub
 
End Class 

Running the Project

And that is all there is to it! Save your project, then run it (F5), and view the slideshow…

Conclusion

I really hope you find this slideshow as useful as I did. The code is easy to modify, so if you want, go in and tweak it.

Happy programming!

History

• 6^th October, 2009: Initial post