A Simple Image Slide Show Using First, Next, Previous and Last Button in WPF

In this article we will see how to create a simple image slide show in WPF. In an Image Control, I am fetching images from the database using First, Next, Previous and Last buttons. I am using the Code First Approach to create a database in SQL Server .The images displayed in the image control are taken from the database. For your convenience I am storing images of the numbers from 1 to 10 in the database. Before proceeding to this article I request that you go through my previous article of how to store and retrieve images from a SQL Server Database in WPF.

For more information, click on the following link to learn how to store and retrieve images in a SQL database in WPF:

In other words: Storing and Retrieving Image from SQL Server Database in WPF

Now I will explain how all 4 button events work one by one as shown below.

First Button

When you click on the first button, the very first image from the database will be fetched into the image control as shown in the following snapshot.



The code behind for the first button click event is:

private void First Click(object sender, RoutedEventArgs e)

{

   Database DB = new Database();//Context Class name

   var result = (from t in DB.Images

   select t.ImageToByte).FirstOrDefault();

   Stream StreamObj = new MemoryStream(result); //converting bytes to stream

   BitmapImage BitObj = new BitmapImage();

   BitObj.BeginInit();

   BitObj.StreamSource = StreamObj;

   BitObj.EndInit();

   this.image2.Source = BitObj

}

Next Button

When you click on "Next" button, the next image from the database will be fetched into the image control. A snapshot of the Next Click event is shown below.



The code behind for the next button click event is:
 

private void Next_Click(object sender, RoutedEventArgs e)

{

  Database DB = new Database();

  if (count < (DB.Images.Count() - 1))

  {

     count++;

     var result = DB.Images.OrderBy(t => t.Id).Skip(count).FirstOrDefault();

     Stream StreamObj = new MemoryStream(result.ImageToByte);

     BitmapImage BitObj = new BitmapImage();

     BitObj.BeginInit();

     BitObj.StreamSource = StreamObj;

     BitObj.EndInit();

     this.image2.Source = BitObj;

}

else

{

  var result = DB.Images.Select(c => c).FirstOrDefault();

  Stream StreamObj = new MemoryStream(result.ImageToByte);

  BitmapImage BitObj = new BitmapImage();

  BitObj.BeginInit();

  BitObj.StreamSource = StreamObj;

  BitObj.EndInit();

  this.image2.Source = BitObj;

  count = 0;

 }

}

Previous Button

When you click the previous button, the previous image of the current image will be fetched into the image control. Here the previous image is the image of the number 1 so the number will be displayed again in the previous click. See the following snapshot of the previous button click.



The code behind for the previous button click event is:
 

private void Previo_Click(object sender, RoutedEventArgs e)

{

  Database DB = new Database();

  count--;

  if (count < 0)

  {

    count = DB.Images.Count();

  }

  var result = DB.Images.OrderBy(t => t.Id).Skip(count).Take(1);

  foreach (var s1 in result)

  {

    Stream StreamObj = new MemoryStream(s1.ImageToByte);

    BitmapImage BitObj = new BitmapImage();

    BitObj.BeginInit();

    BitObj.StreamSource = StreamObj;

    BitObj.EndInit();

    this.image2.Source = BitObj;

  }

}

Last Button

When you click on the last button, the last image from the database will be fetched into the image control, the last image in the database is the image of the number 10. So obviously the number 10 will be fetched into the image control, see the following snapshot of the last button event.



The code behind for the last button is:
 

private void Last_Click(object sender, RoutedEventArgs e)

{

  Database DB = new Database();

  count = -1;

  var result = DB.Images.OrderByDescending(c => c.Id).FirstOrDefault();

 

  Stream StreamObj = new MemoryStream(result.ImageToByte);

  BitmapImage BitObj = new BitmapImage();

  BitObj.BeginInit();

  BitObj.StreamSource = StreamObj;

  BitObj.EndInit();

  this.image2.Source = BitObj;

}

Summary

In this article I have shown how to create a simple slide show using First, Next, Previous and Last buttons in WPF. I have uploaded the source code also. If you have any queries regarding this article then please do comment. Thanks for reading my article.