ImageSlider in Silverlight 2.0

By Fons Sonnemans, 23-jun-2009

Today I found this blog about 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials. I really like the Beautiful jQuery Slider Tutorial which you can try on this page.

I wondered how easy it would be to create a similar solution using Silverlight 2.0. So I tried it and it was easy. I have used the HtmlBridge to initialize the ImageSlider with the correct images. Added some animations using Expression Blend. Used the VisualStateManager to style the RadioButtons.

You can download the sourcecode from here.

Get Microsoft Silverlight

You have to initialize the control and add images to it using JavaScript as demonstrated in the plugInLoaded() function below. Simular to the JQuery solution.

<script language="javascript" type="text/javascript">

function plugInLoaded(sender) {
    var slider = sender.getHost().Content.Slider;
    slider.Initialize(5, 586, 200);
    slider.AddImage("nature-photo.png", "Photo 1");
    slider.AddImage("nature-photo1.png", "Photo 2");
    slider.AddImage("nature-photo2.png", "Photo 3");
    slider.AddImage("nature-photo3.png", "Photo 4");
    slider.AddImage("nature-photo4.png", "Photo 5");
    slider.AddImage("nature-photo5.png", "Photo 6");
    slider.AddImage("nature-photo6.png", "Photo 7");


<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
    width="586" height="200">
    <param name="source" value="ClientBin/ImageSlider.xap" />
    <param name="onerror" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="onLoad" value="plugInLoaded" />
    <param name="minRuntimeVersion" value="2.0.31005.0" />
    <param name="autoUpgrade" value="true" />
    <a href="" style="text-decoration: none;">
        <img src="" alt="Get Microsoft Silverlight"
            style="border-style: none" />

Leave a Comment

Leave a Comment
2 + 8 =


All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.