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:
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:
Private Sub AddImages()
ImageList.Add("images/Blue hills.jpg")
ImageList.Add("images/Sunset.jpg")
ImageList.Add("images/Water lilies.jpg")
ImageList.Add("images/Winter.jpg")
ImageList.Add("http://tiny.cc/NX6Kv")
End Sub
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
- 6th October, 2009: Initial post