Want to have a slideshow of images on button click

Question

I have stack of images in a grid and i want to implement a slide show for it.I am using Microsoft VS 2010 Express Edition for Windows phone for implemenitng this.Can someone help ? The code is :

 using System;
 using System.Collections.Generic;

 using System.Windows.Threading;

  namespace swipe
 {
 public partial class MainPage : PhoneApplicationPage
{
 // private DispatcherTimer tmr = new DispatcherTimer();

private List<string> images = new List<string>();

private int imageIndex = 0;

public MainPage()
{
    InitializeComponent();

    Loaded += new RoutedEventHandler(MainPage_Loaded);
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
   // tmr.Interval = TimeSpan.FromSeconds(5);
   // tmr.Tick += new EventHandler(tmr_Tick);

    LoadImages();

    ShowNextImage();
}

private void LoadImages()
{
    images.Add("/images/Hydrangeas.jpg");
    images.Add("/images/Jellyfish.jpg");
    images.Add("/images/Koala.jpg");
    images.Add("/images/Tulips.jpg");
}

private void ShowNextImage()
{
   // String bi = new BitmapImage(new Uri(images[imageIndex], UriKind.Relative));

    myImg.Source = new BitmapImage(new Uri(images[imageIndex], UriKind.Relative));

    imageIndex = (imageIndex + 1) % images.Count;
   }

   //void tmr_Tick(object sender, EventArgs e)
   //{
   //    ShowNextImage();
   //}

 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
   {
    //if (!tmr.IsEnabled)
    //{
    //    tmr.Start();
    //}

    base.OnNavigatedTo(e);
 }
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    //tmr.Stop();

    base.OnNavigatedFrom(e);
}

private void Play_Click(object sender, RoutedEventArgs e)
{
    ShowNextImage();
}

 }
 }

Answer 1

The easy way is to create a collection of images, and and go to next image in the collection when you go to next page in a pivot page.

A other solution is to create a usercontrol. Here is a guide how to do it in silverlight ( but not in WP7, but it is very similar ).

Answer 2

Here's a quick example of one way of doing this. It doesn't use a grid of images but I'm sure you can adjust this as you need to.

Edit: reread the title. If you want this to advance on button click get rid of the timer and call ShowNextImage() in the click event.

The page includes the following XAML:

<Image x:Name="myImg" />

The code behind looks like:

private DispatcherTimer tmr = new DispatcherTimer();

private List<string> images = new List<string>();

private int imageIndex = 0;

public MainPage()
{
    InitializeComponent();

    Loaded += new RoutedEventHandler(MainPage_Loaded);
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    tmr.Interval = TimeSpan.FromSeconds(5);
    tmr.Tick += new EventHandler(tmr_Tick);

    LoadImages();

    ShowNextImage();
}

private void LoadImages()
{
    // list the files (includede in the XAP file) here
    images.Add("/images/filename1.jpg");
    images.Add("/images/filename2.jpg");
    images.Add("/images/filename3.jpg");
    images.Add("/images/filename4.jpg");
}

private void ShowNextImage()
{
    var bi = new BitmapImage(new Uri(images[imageIndex], UriKind.Relative));

    myImg.Source = bi;

    imageIndex = (imageIndex + 1) % images.Count;
}

void tmr_Tick(object sender, EventArgs e)
{
    ShowNextImage();
}

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    if (!tmr.IsEnabled)
    {
        tmr.Start();
    }

    base.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    tmr.Stop();

    base.OnNavigatedFrom(e);
}

Sample code which shows using a button to advance code can be downloaded from http://cid-cc22250598bf7f04.office.live.com/self.aspx/Public/SlideShowDemo.zip