Image Slider Using Silverlight 4

This article describes you how to use image slider using Silverlight 4.

As usual make a new Silverlight project.



Image 1.

Make a new class Animation.cs

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;

}

MainPage.xaml

<UserControl x:Class="ImageSlider_Using_Silverlight4.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" Height="500" Width="800">           

        <Grid x:Name="LayoutRoot">

        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">

            <HyperlinkButton VerticalAlignment="Center" x:Name="previousImageHyperlinkButton" Click="previousImageHyperlinkButton_Click"  IsTabStop="False">

                <HyperlinkButton.Content>

                    <Image Source="Images/prev.jpg" Width="50" />

                </HyperlinkButton.Content>

            </HyperlinkButton>

            <Canvas x:Name="Canvas1" Background="Blue"  Margin="0,-200,500,0">

                <Canvas.Clip>

                    <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,500,400" />

                </Canvas.Clip>

                <StackPanel x:Name="MainStackPanel" Orientation="Horizontal" Height="400">

                    <StackPanel.RenderTransform>

                        <TranslateTransform X="0" Y="0" x:Name="ScaleMove" />

                    </StackPanel.RenderTransform>

                    <Image Source="Images/1.jpg" Stretch="Fill" Width="500"/>

                    <Image Source="Images/2.jpg" Stretch="Fill" Width="600"/>

                    <Image Source="Images/3.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/4.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/5.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/6.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/7.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/8.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/9.jpg" Stretch="Fill" Width="600" />

                    <Image Source="Images/10.jpg" Stretch="Fill" Width="600" />

                </StackPanel>

            </Canvas>

            <HyperlinkButton VerticalAlignment="Center" x:Name="nextImageHyperlinkButton" Click="nextImageHyperlinkButton_Click" IsTabStop="False">

                <HyperlinkButton.Content>

                    <Image Source="Images/next.jpg" Width="50" />

                </HyperlinkButton.Content>

            </HyperlinkButton>

        </StackPanel>

    </Grid>   

</UserControl>

MainPage.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace ImageSlider_Using_Silverlight4

{

    public partial class MainPage : UserControl

    {

        int countImage = 0;

        int sildeMoved = 1;

        public MainPage()

        {

            InitializeComponent();

        }     

       private void nextImageHyperlinkButton_Click(object sender, RoutedEventArgs e)

       {

            if (MainStackPanel.Children.Count != sildeMoved)

            {

                sildeMoved++;

                countImage -= 600;

                Animation.SlideImageEffect(this.MainStackPanel, countImage).Begin();

            }

        }

        private void previousImageHyperlinkButton_Click(object sender, RoutedEventArgs e)

        {

            if (sildeMoved != 1)

            {

                sildeMoved--;

                countImage += 600;

                Animation.SlideImageEffect(this.MainStackPanel, countImage).Begin();

            }

        }

    }

}

Now run the application to see the output.



Image 2.