Sharker Khaleed Mahmud Silverlight Tips & Tricks

July 21, 2010

78. How do I create a simple Image Slider in Silverlight

Filed under: Silverlight — Tags: , , , , , , — Sharker Khaleed Mahmud | shamrat231 @ 4:32 AM

[tweetmeme source=”shamrat231” only_single=false]

I will continue with my previous post next week. In the mean time, I will show you how to create a simple image slider. Basically a slider or tray of image can be used in many different scenarios. One common example would be IMDB slide show. Currently it has post back for every image. Anyway, I am going create a sliding image using deviant art gallery examples for demonstration purpose.

First of all, there are two ways we can integrate sliding behavior. One option would be to animate through Storyboard from Expression Blend. Another one is to do it using managed code from C#. The latter one is a bit trickier, but that is the one I will code for this scenario.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

A basic slide show needs to have a < previous and a next > image. Current version of Silverlight Image control do not support click event. So I will use HyperlinkButton as shown above.

MainPage.xaml

        <StackPanel Orientation=”Horizontal” VerticalAlignment=”Center”>
            <HyperlinkButton>
                <HyperlinkButton.Content>
                    <Image Source=”Images/previous.png” Width=”128″ />
                HyperlinkButton.Content>
            </HyperlinkButton>
            <StackPanel Orientation=”Horizontal” Width=”500″>
                Image….
            StackPanel>
            <HyperlinkButton>
                <HyperlinkButton.Content>
                    <Image Source=”Images/next.png” Width=”128″ />
                </HyperlinkButton.Content>
            </HyperlinkButton>
        StackPanel>

Now let’s put some image in the above code. The main idea is that I will try to slide the whole image collection while always showing one image per slide. For this to work, there are two things that need to be done.

First of all, the portion that the user should see from the collection be a canvas with 500 width. So basically, at all times, any image that will be shown from the Stackpanel will be in the canvas control and rest will automatically get cut if it exceeds the clipping. Next thing that I have to do is to add a simple sliding effect here. For this purpose, I will modify translate X coordinates for PanelHost from code level. So the code at xaml becomes like this.

            <Canvas x:Name=”MainFrame” Background=”AntiqueWhite” Margin=”0,-200,600,0″>
                <Canvas.Clip>
                    <RectangleGeometry RadiusX=”10″ RadiusY=”10″ Rect=”0,0,600,500″ />
                </Canvas.Clip>
                <StackPanel x:Name=”PanelHost” Orientation=”Horizontal” Height=”500″>
                    <StackPanel.RenderTransform>
                        <TranslateTransform X=”0″ Y=”0″ x:Name=”ScaleMove” />
                    </StackPanel.RenderTransform>
                    <Image Source=”Images/Atlantis_by_RaVirr17.jpg” Stretch=”Fill” Width=”600″/>
                    <Image Source=”Images/in_our_rainbow_by_WolfRoad.jpg” Stretch=”Fill” Width=”600″/>
                    <Image Source=”Images/bda5f23dc0d4364c0d862123c5ffc826.jpg” Stretch=”Fill” Width=”600″ />
                    <Image Source=”Images/Wings_of_Time__One__by_selenart.jpg” Stretch=”Fill” Width=”600″ />
                </StackPanel>
            </Canvas>

Ok, lets create a sliding storyboard from code behind.

Animation.cs

    public class Animation
    {
public static Storyboard SlideImageEffect(UIElement controlToAnimate, double positionToMove)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.Duration = new Duration(TimeSpan.FromSeconds(1));

            Storyboard sb = new Storyboard();
            sb.Duration = new Duration(TimeSpan.FromSeconds(1));
            sb.Children.Add(da);

            Storyboard.SetTarget(da, controlToAnimate);
            Storyboard.SetTargetProperty(da, new PropertyPath(“(UIElement.RenderTransform).(TranslateTransform.X)”));
            da.To = positionToMove;
            return sb;
        }
    }

Now call this managed code storyboard like this

MainPage.xaml.cs

    public partial class MainPage : UserControl
    {
        int imgSlide = 0;
        int noimgMoved = 1;
        public MainPage()
        {
            InitializeComponent();
        }

        private void Back_Click(object sender, RoutedEventArgs e)
        {
            if (noimgMoved != 1)
            {
                noimgMoved–;
                imgSlide += 600;
                Animation.SlideImageEffect(this.PanelHost, imgSlide).Begin();
            }
        }

        private void Next_Click(object sender, RoutedEventArgs e)
        {
            if (PanelHost.Children.Count != noimgMoved)
            {
                noimgMoved++;
                imgSlide -= 600;
                Animation.SlideImageEffect(this.PanelHost, imgSlide).Begin();
            }
        }
    }

In the above code, I am keeping track of no of image moved and how much translate has been made to the current stackpanel. By default I have set my main view width to 600. So every time it slides, it adds or remove the fixed width from the translate X position.

So the final markup of the MainPage.xaml is like this

MainPage.xaml

<UserControl x:Class=”Tips.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”1000″>
    <Grid x:Name=”LayoutRoot” Background=”Black”>
        <StackPanel Orientation=”Horizontal” VerticalAlignment=”Center” HorizontalAlignment=”Center”>
            <HyperlinkButton VerticalAlignment=”Center” Click=”Back_Click” IsTabStop=”False”>
                <HyperlinkButton.Content>
                    <Image Source=”Images/previous.png” Width=”128″ />
                </HyperlinkButton.Content>
            </HyperlinkButton>
            <Canvas x:Name=”MainFrame” Background=”AntiqueWhite” Margin=”0,-200,600,0″>
                <Canvas.Clip>
                    <RectangleGeometry RadiusX=”10″ RadiusY=”10″ Rect=”0,0,600,500″ />
                </Canvas.Clip>
                <StackPanel x:Name=”PanelHost” Orientation=”Horizontal” Height=”500″>
                    <StackPanel.RenderTransform>
                        <TranslateTransform X=”0″ Y=”0″ x:Name=”ScaleMove” />
                    </StackPanel.RenderTransform>
                    <Image Source=”Images/Atlantis_by_RaVirr17.jpg” Stretch=”Fill” Width=”600″/>
                    <Image Source=”Images/in_our_rainbow_by_WolfRoad.jpg” Stretch=”Fill” Width=”600″/>
                    <Image Source=”Images/bda5f23dc0d4364c0d862123c5ffc826.jpg” Stretch=”Fill” Width=”600″ />
                    <Image Source=”Images/Wings_of_Time__One__by_selenart.jpg” Stretch=”Fill” Width=”600″ />
                </StackPanel>
            </Canvas>
            <HyperlinkButton VerticalAlignment=”Center” Click=”Next_Click” IsTabStop=”False”>
                <HyperlinkButton.Content>
                    <Image Source=”Images/next.png” Width=”128″ />
                </HyperlinkButton.Content>
            </HyperlinkButton>
        </StackPanel>
        <HyperlinkButton Content=”Samples from http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” Height=”30″ VerticalAlignment=”Top” HorizontalAlignment=”Center” IsTabStop=”False”/>
    </Grid>
</UserControl>

I will continue more with this topic in next entry by adding other stuffs before going back to PhotoShop effects library.

As always, you can download the source code from here [download link

Sharker Khaleed Mahmud
Web Developer

Advertisements

7 Comments »

  1. […] How do I create a simple image slider in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 034 for 7/26/2010 - Pete Brown's 10rem.net — July 26, 2010 @ 5:20 AM

  2. Nice Job! love it!

    Comment by technette — August 4, 2010 @ 8:33 PM

  3. Great job!

    Comment by Piit — August 30, 2010 @ 8:06 AM

  4. What if I wanted to manage the image list from the code behind? Or show more than one image at a time?

    Comment by Fahim — December 1, 2010 @ 6:11 PM

  5. also i think the download has reached its limit as the link is no longer available from megaupload.

    Comment by Fahim — December 6, 2010 @ 5:45 PM

    • I just checked. Its there. I have life time membership. So the links will live forever. One possible reason for showing that message i if you are using shared IP where some else is downloading from megaupload….

      Comment by Sharker Khaleed Mahmud | shamrat231 — December 7, 2010 @ 5:43 AM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: