Reader Level:
Articles

Image SlideShow Using DispatchTimer in Windows Store Apps

By Georgie Webber on Nov 30, 2012
This article helps you to create an Image Rotation or Slide Show of Images using a timer in Windows Store Apps.
  • 0
  • 0
  • 17439

In my previous article I explained DispatchTimer in Windows Store Apps. Now, here I will just use the DispatchTimer to execute a particular block continuously until it stops.

You can see my previous article from here:

How to use Timer in Windows Store Application Using XAML.

I create a Windows Store Application in which I will show you an example of image rotation or you can say a slide show of images using the DispatchTimer Class in XAML.

So, let's begin to create an application.

Procedure

Choose Blank Template of Windows Store using XAML.

Here I design UI using XAML code.

<Page

    x:Class="TimerInWindowsStoreApps.ImageSlideShow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:TimerInWindowsStoreApps"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid x:Name="LayoutRoot" Background="LightBlue">

        <Grid Margin="0,50">

            <Grid.RowDefinitions>

                <RowDefinition Height="410"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0">

                <Border BorderBrush="Black" Grid.Row="0" BorderThickness="1" Width="700">

                   <Image x:Name="ImageSource" AutomationProperties.Name="ImageSource" VerticalAlignment="Top" Stretch="Fill" Height="380" Width="700">                      

                    </Image>

                </Border>

            </StackPanel>

            <Grid x:Name="Input" Grid.Row="1" Margin="0,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Center">

                <StackPanel Orientation="Horizontal">

                    <Button x:Name="playSlideshow" Grid.Row="1"  Margin="0,0,10,0" Click="playSlideshow_Click" Style="{StaticResource PlayAppBarButtonStyle}"/>

                    <Button x:Name="pauseSlideshow" Grid.Row="1"  Margin="0,0,10,0" Click="pauseSlideshow_Click" Style="{StaticResource PauseAppBarButtonStyle}"/>

                    <Button x:Name="previousItem" Grid.Row="1" Margin="0,0,10,0" Click="previousItem_Click" Style="{StaticResource PreviousAppBarButtonStyle}"/>

                    <Button x:Name="nextItem" Grid.Row="1"  Margin="0,0,10,0" Click="nextItem_Click" Style="{StaticResource NextAppBarButtonStyle}"/>

                </StackPanel>

            </Grid>

        </Grid>

    </Grid>

</Page>

In the above code I used an image control and 4 buttons for play, pause, next and previous slides of images.

Now, Let's put our .cs code in MainPage.xaml.cs file.

Here I just create a list of images and set the property and Tick event of the DispatchTimer.

DispatcherTimer playlistTimer = null;

List<string> Images = new List<string>();

protected override void OnNavigatedTo(NavigationEventArgs e)

{

      Images.Add("Chrysanthemum.jpg");

      Images.Add("Desert.jpg");

      Images.Add("Hydrangeas.jpg");

      Images.Add("Jellyfish.jpg");

      Images.Add("Koala.jpg");

      playlistTimer = new DispatcherTimer();

      playlistTimer.Interval = new TimeSpan(0, 0, 5);

      playlistTimer.Tick += playlistTimer_Tick;

      ImageSource.Source = new BitmapImage(new Uri("ms-appx:///Assets/" + Images[count]));

}

Increment the counter of list to fetch next image.

void playlistTimer_Tick(object sender, object e)

{

            if (Images != null)

            {

                if (count == Images.Count - 1)

                    count = 0;

                if (count < Images.Count)

                {

                    count++;

                    ImageRotation();

                }

            }

}


Now, set the source of the image on the basis of a counter of the list in the ImageRotation Method.
 

private void ImageRotation()

{

    ImageSource.Source = new BitmapImage(new Uri("ms-appx:///Assets/" + Images[count].ToString()));

}

Complete Code of .cs file:
 

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using Windows.UI.Xaml.Navigation;

 

namespace TimerInWindowsStoreApps

{

    public sealed partial class ImageSlideShow : Page

    {

        public ImageSlideShow()

        {

            this.InitializeComponent();

        }

        DispatcherTimer playlistTimer = null;

        List<string> Images = new List<string>();

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            Images.Add("Chrysanthemum.jpg");

            Images.Add("Desert.jpg");

            Images.Add("Hydrangeas.jpg");

            Images.Add("Jellyfish.jpg");

            Images.Add("Koala.jpg");

            playlistTimer = new DispatcherTimer();

            playlistTimer.Interval = new TimeSpan(0, 0, 5);

            playlistTimer.Tick += playlistTimer_Tick;

            ImageSource.Source = new BitmapImage(new Uri("ms-appx:///Assets/" + Images[count]));

        }

        int count = 0;

        void playlistTimer_Tick(object sender, object e)

        {

            if (Images != null)

            {

                if (count == Images.Count - 1)

                    count = 0;

                if (count < Images.Count)

                {

                    count++;

                    ImageRotation();

                }

            }

        }

        private void ImageRotation()

        {

            ImageSource.Source = new BitmapImage(new Uri("ms-appx:///Assets/" + Images[count].ToString()));

 

        }

        private void playSlideshow_Click(object sender, RoutedEventArgs e)

        {

            if (Images != null)

            {

                playlistTimer.Start();

            }

        }

        private void pauseSlideshow_Click(object sender, RoutedEventArgs e)

        {

            if (Images != null)

            {

                playlistTimer.Stop();

            }     

        private void previousItem_Click(object sender, RoutedEventArgs e)

        {

            if (Images != null)

            {

                count--;

                if (count >= 0)

                {

                    ImageRotation();

                }

                else

                {

                    count = Images.Count - 1;

                    ImageRotation();

                }

            }

        }

        private void nextItem_Click(object sender, RoutedEventArgs e)

        {

            if (Images != null)

            {

                count++;

                if (count < Images.Count)

                {

                    ImageRotation();

                }

                else

                {

                    count = 0;

                    ImageRotation();

                }

            }

        }

    }

}

 

Now, build the application and run it. Click on the Play button to start the SlideShow.

You will see that after every 5 seconds the image will change. You can also pause the SlideShow.


Image-Rotation-In-Windows-Store-Apps.jpg

COMMENT USING