Habitually Good

 

Slide.Show is an open source Silverlight control for publishing highly customizable photo slide shows on the Internet. It has been developed and released to the open source community by Vertigo Software. And since it’s open source, it allows people like me to extend the control for our purposes.

One such purpose that I came across while using this control was the need to allow the user to click the currently shown picture and navigate to a page which shows more details about that image.

Despite searching a lot, I couldn’t find the configuration setting which would allow me to achieve this, so I started digging into the code to add my own setting. Here is how I did it:

Note: I would appreciate zero comments on coding style, and welcome all comments on how to make improvements to this and add other customizations.

I needed to be able to specify a Url for each photo which the user will be able to navigate to when they click the title of the currently showed photo. Lets take a look at what changes I had to make to the Slideshow.js to make this happen:

Add capability to pass in Url - First thing we need to do is to be able to pass in the Url for each slide in the Data File and assign it to the relevant property. After examining the code, it turns out that the Slide Title is rendered using a TextBlock element. This element doesn’t have a Url property, but what it does have is a “Tag” property, which can store an arbitrary value.

First, you need to locate the SlideShow.SlideDescription class in the Slideshow.js file. In this class, locate a function called onSlideLoading. It is in this function that you see the title and the description being assigned to the control. Here’s what the function looks like:

What this function is doing is that it is assigning the values that it had read from the Xml file to the TextBlock properties for Title and Description. To this function, we need to add our own code which reads a Url value (that we will pass in the Data.Xml) and assign it to the Tag property of the Title TextBlock. Here’s the change I made to the code to achieve this (red highlight):

Notice that I am assuming a property called e.Url in the incoming event. This (Url) will be the name of the node in the Data.Xml when we send the Url in. Also notice that I am calling a function called setUrl, this is a function that you will have to define in the class (much like how the setTitle and setDescription functions are defined already). Here’s the setUrl function:

Notice that we have assigned the Url to the Tag property of the title TextBlock. That is done. Let’s proceed.

Code to launch the Url when the title is clicked - For the second part, we will need to add an event to the Title TextBlock and then use the eventhandler for that event to launch the Url. Here’ how.

Once again, in the same class (SlideShow.SlideDescription) locate the constructor function (it is the one with a load of Xaml in it). Move down towards the end of the function where events are being registered. Here, we will register our own event. Add the lines as shown below (in red):

What we are doing is that we are registering for the click event on the Title TextBlock. Note, I have also added a code snippet to make the cursor change to a hand when the mouse comes over the Title TextBlock. And, now we simply implement the Event Handler for this event. To do this, you will need to add a function called onMouseLeftButtonDown in the class, see below:

And that’s it, we are done. Now all we need to do is pass in a Url attribute in the Data.Xml file, and it should work just fine - see example below:

 

Of course, you can modify this approach to make other areas of the slide clickable as well. I only needed the title to be clickable.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.