WP7 Silverlight -- tapping image in a stackpanel scrollview to show that same picture in another grid

Question

I am probably the absolute worst "coder" trying to create a Windows Phone 7 app, but I am in dire need of help, and some of you may even consider it to be laughably easy (which it probably is).

My problem: How on earth do I code the tapping of a picture from one grid to display as a bigger image on another grid?

And I'll elaborate:

I have an app page (in landscape mode only), with two grids splitting the screen.

The first grid (smallgrid) contains a Scrollviewer (small) with a Stackpanel (smallimages) of images reduced to 1/10 of their size within it, essentially showing thumbnails of images.

The second grid (contentgrid) is designed where once you tap on a thumbnail image from smallgrid that image will be shown in contentgrid

By default, balloon0 is displayed in the contentgrid and will change when a person taps on one of the smaller images.

I'll try to provide some mock code for this:

<grid x:name="smallgrid">
  <scrollviewer x:name="small">
    <stackpanel x:name="smallimages">
      <image="balloon0.jpg"><image>
      <image="balloon1.jpg"><image>
      <image="balloon2.jpg"><image>
      <image="balloon3.jpg"><image>
    </stackpanel>
  </scrollviewer>
</grid>

<grid x:name="contentgrid">
  <image source="balloon0.jpg"><image>
</grid>

The code behind is where I need help. I am thinking I either use a button that once clicked, that image then replaces the image in contentgrid but I have no idea how to do that.

Or I can use a gesturelistener that when an image is tapped, it will replace the image in contentgrid... but I also don't know how to do that.

Any insight is helpful. Thank you for any help, as I am not a C# coder, let alone know the language or WP7 silverlight too well.

Answer 1

Be sure to add the Silverlight Toolkit assembly reference to your phoneapplicationpage element (and as a reference to the project):

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

You can use the GestureListener from the Silverlight Toolkit in your XAML like this (also be sure to add the name property to your large image):

<grid x:name="smallgrid">
   <scrollviewer x:name="small">
      <stackpanel x:name="smallimages">
         <image="balloon0.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
         <image="balloon1.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
         <image="balloon2.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
         <image="balloon3.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
      </stackpanel>
   </scrollviewer>
</grid>

<grid x:name="contentgrid">
   <image x:Name="BigImage" source="balloon0.jpg"><image>
</grid>

Then in your code-behind you can handle the event like this:

private void smallImage_Tap(object sender, GestureEventArgs e)
{
    BigImage.Source = (sender as Image).Source;
}