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 database using First, Next, Previous and Last Button .I am using Code-First Approach to create database in SQL Server .The images which are displaying in image control are taken from the database. For your convenience I am storing images of numbers from 1 to 10 in database. Before proceeding to this article I request you to go through my previous article, how to store and retrieve images from SQL Server Database in WPF.

 Now I will explain the working of all 4 buttons events one by one as shown below.

First Button:

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

The code behind for 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 image control. Snapshot of Next Click event is shown below.

The code behind for 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 image of number 1 so number will display again in previous click. See the below snapshot of previous button click.

 The code behind for 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 last button, the last image from the database will be fetched into image control, the last image in database is image of number 10.So obviously number 10 will be fetched into image control, see the below snapshot of last button event

 The code behind for 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 Button in WPF. I have uploaded the source code also. If you have any queries regarding this article please do comment. Thanks for reading my article.

Source Code :Download