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]()