Image Slider in Windows Phone 7

In this article, we will discuss the Image Slider in Windows Phone 7. For this use these steps.
 
Step 1: For this, first we take an image control to show the images and two Buttons (one for showing the previous image and the another one is used to show the next image like this:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Image Height="329" HorizontalAlignment="Left" Margin="101,66,0,0"
          Name="img1" Stretch="Fill" VerticalAlignment="Top" Width="221"  
          Source="/Image%20Slider%20In%20Windows%20Phone7;component
                      /Image/Chrysanthemum.jpg" />
      <Button Content="Back" Height="72" HorizontalAlignment="Left"
          Margin="29,431,0,0" Name="btnprevious" VerticalAlignment="Top" Width="126" />
      <Button Content="Next" Height="72" HorizontalAlignment="Left"
          Margin="243,431,0,0" Name="btnnext" VerticalAlignment="Top" Width="126" />
 </Grid>
 <TextBox Height="72" Visibility="Collapsed" HorizontalAlignment="Left"
        Margin="101,529,0,0" Name="textBox1" Text="1" VerticalAlignment="Top" Width="237" />

The Output Will be:



Note: Here we use the TextBox to set the default value in it, which is used in our program. It can't be visible since we set its visbility property to "Collapsed".

Step 2: After that first we write the code for the OnClick event of the Next Button:

using System.Windows.Media.Imaging;
     int a;
     // Constructor

     public MainPage()
     {
         InitializeComponent();
     }
     private void btnnext_Click(object sender, RoutedEventArgs e)
    {
        if (a == 0)
        {
            textBox1.Text = "1";
        }
        if (a == 1)
        {
            textBox1.Text = "2";
        }
        else if (a == 2)
        {
            textBox1.Text = "3";
        }
        else if (a == 3)
        {
            textBox1.Text = "4";
        }

        if (textBox1.Text == "1")
        {
            Uri uri = new Uri("Image/Desert.jpg", UriKind.Relative);
            BitmapImage imgSource = new BitmapImage(uri);
            this.img1.Source = imgSource;
            a = 1;
        }
        if (textBox1.Text == "2")
        {
            Uri uri = new Uri("Image/Hydrangeas.jpg", UriKind.Relative);
            BitmapImage imgSource = new BitmapImage(uri);
            this.img1.Source = imgSource;
            a=2;
        }
        if (textBox1.Text == "3")
        {
            Uri uri = new Uri("Image/Jellyfish.jpg", UriKind.Relative);
            BitmapImage imgSource = new BitmapImage(uri);
            this.img1.Source = imgSource;
            a = 3;
        }
    }
Here we set the values in the TextBox, which is helpful to show the next image. And we set the value in the integer a.

When we click on the Next button, the output will be:

Step 3: After that we write the code for the Previous Button:

private void btnprevious_Click(object sender, RoutedEventArgs e)
{
     if (a == 1)
     {
          textBox1.Text = "1";
     }
     if (a == 2)
     {
          textBox1.Text = "2";
     }
     if (a == 3)
     {
          textBox1.Text = "3";
     }

     if (a == 4)
     {
          textBox1.Text = "4";
     }
     if (a == 5)
     {
          textBox1.Text = "5";
     }
     if (textBox1.Text == "1")
     {
          Uri uri = new Uri("Image/Chrysanthemum.jpg", UriKind.Relative);
          BitmapImage imgSource = new BitmapImage(uri);
          this.img1.Source = imgSource;
          a = 0;
     }
     if (textBox1.Text == "2")
     {
          Uri uri = new Uri("Image/Desert.jpg", UriKind.Relative);
          BitmapImage imgSource = new BitmapImage(uri);
          this.img1.Source = imgSource;
          a = 1;
     }
     if (textBox1.Text == "3")
     {
          Uri uri = new Uri("Image/Hydrangeas.jpg", UriKind.Relative);
          BitmapImage imgSource = new BitmapImage(uri);
          this.img1.Source = imgSource;
          a = 2;
     }
     if (textBox1.Text == "4")
     {
          Uri uri = new Uri("Image/Jellyfish.jpg", UriKind.Relative);
          BitmapImage imgSource = new BitmapImage(uri);
          this.img1.Source = imgSource;
          a = 3;
     }   
 }

When we click on the Back Button the output will be: