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) my first Silverlight Slideshow that I’ve created, but it’s also my first Silverlight user control that I’ve created!
 
 
 
Before I begin, let me show you a couple of great Silverlight Slideshows that I found:

Mike Swanson’s Blog:

http://blogs.msdn.com/mswanson/archive/2007/12/18/silverlight-slide-show.aspx

Andrew Arnott’s Blog:
http://blogs.msdn.com/andrewarnottms/archive/2008/01/01/an-impressive-silverlight-slideshow-control.aspx


Koen Zwikstra’s Blog:
http://firstfloorsoftware.com/slideshow/silverlight-slideshow/


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.
 
 

Download the Source Code

 

Download either the Slideshow Class Library Project, which you can add directly to your solution; or the Complete Demo Solution, which includes the SlideShowTest Silverlight website created in this demo, and the Slideshow Class Library Project. 
 

Slideshow Class Library Project:   SlideShow.zip
 

Complete Demo Solution:   SlideShowTest.zip

 

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’re 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 url’s to images on the web, and would like to view them in your slideshow, then you can use those url’s, 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, then add the url’s to your images as follows:

 

 
 
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:
 

 
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.
 

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 to go in and tweak it, have at it.

 

Happy programming!