ImageSlider in Silverlight 2.0

By Fons Sonnemans, posted on 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.

    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");


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

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.

Leave a comment

Blog comments

0 responses