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. 
Levi IsraelPosted Jul 15, 2021, 1:56 PM
Thx helped me a lott :)
Liberty InfotechPosted Jan 15, 2016, 2:11 AM
I need help on this method of Image slideshow I want to be able to display a picture slide show on my page, together with labeling and text, sliding together in sync. Below is what I already have but it is not synchronizing. I will appreciate any help of the gurus.</div> <div> </div> <div> </div> <div>private void GetImage() { SqlConnection conn = new SqlConnection("data source=.\\MSSQLSERVER2; initial catalog=SuperStoreDB; integrated security=true"); SqlCommand comm = new SqlCommand(); conn.Open(); comm.Connection = conn; comm.CommandText = "SELECT TOP 1 Id,Name from Images order by NEWSEQUENTIALID ()"; SqlDataAdapter da = new SqlDataAdapter(comm); DataTable dt = new DataTable(); da.Fill(dt); //comm = new SqlCommand("Select * from Images"); SqlDataReader dr = comm.ExecuteReader(); dr.Read(); if (dr.HasRows) { lblName.Text = dr["Name"].ToString(); Image1.ImageUrl = "~/HandlerImage.ashx?Id=" + dt.Rows[0][0]; } conn.Close(); }</div> <div> </div> <div>for the .ashx</div> <div>public class HandlerImage : IHttpHandler { public void ProcessRequest(HttpContext context) { if (context.Request.QueryString["id"] != null) { // context.Response.Write(context.Request.QueryString["id"]); SqlConnection conn = new SqlConnection("data source=.\\MSSQLSERVER2; initial catalog=SuperStoreDB; integrated security=true"); conn.Open(); SqlCommand comm = new SqlCommand("Select Image from Images where Id=@Id", conn); comm.Parameters.AddWithValue("@Id", context.Request.QueryString["id"].ToString()); SqlDataReader dr = comm.ExecuteReader(); dr.Read(); context.Response.BinaryWrite((byte[])dr["Image"]); dr.Close(); conn.Close(); } else { context.Response.Write("No Image Found"); } } Thanks.</div>
priya jainPosted Jun 6, 2013, 7:21 AM
can you give me the complete code of this application for windows phone 7