Reader Level:
ARTICLE

Image SlideShow Using DispatchTimer in Windows Store Apps

Posted by Georgie Webber Articles | Windows Store Apps November 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
  • 15586

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

Trending up