How to draw a small image on Top of Larger Image by press and clear by Touch

Wanted to create a fun app with photo. This 开发者_运维技巧is the scenario:

1. I have a photo of size 640X 480 in the page ( as the background)
2. Display Thumbnail pn the left-side 100x100

This are the problems I wanted to solve:

1. User select a Thumbnail photo 100x100 on the left-side
2. User press or click any where in the large photo ( 640x 480), after pressing, it draws the Thumbnail. What format to use Png or Jpg for Thumbnail so that when you draw it, the background of the Thumbnail will be transparent.
3. user can clear the Thumbnail by touching the Thumbnail.

a) The easy way would be to simply handle the thumbnail's ManipulationStarted method and set that thumbnail to be the current thumbnail. Also, handle the larger photo's ManipulationStarted method and check if a current thumbnail exists. If so, set the larger photo's image source to be that of the thumbnail stream.

b) If you need transparency, you'll have to use a PNG. If you don't need transparency, use JPGs (for efficiency).

c) Set the thumbnail's image source to be null to clear it.

EDIT - This is one way of doing what you want. Of course, instead of individual images, you may want to use UserControls.

//class level variable that holds your current selected image
BitmapImage currentBitmap; 

//Create an event handler to know when your page is loaded
public MyImagePage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MyImagePage_Loaded);
}

//Handle your Page Loaded event
void MyImagePage_Loaded(object sender, RoutedEventArgs e)
{
//Assign your thumbnail image control a picture
imgThumbnail.Source = new BitmapImage(new Uri("thumbnail.jpg", UriKind.Relative));

//Assign your large photo a default image (without an image, Manipulation methods won't be detected)
imgLarge.Source = new BitmapImage(new Uri("largeImage.jpg", UriKind.Relative));

//Make the current bitmap null
currentBitmap = null;
}

//Handle the ManipulationStarted event for your thumbnail image
private void imgThumbnail_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
     //Set the currentImage to be that of the thumbnail
     currentImage = (BitmapImage)imgThumbnail.Source;
}

//Handle the ManipulationStarted event for your large image
private void imgLarge_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
      //check if the current image is null. If it's not, set the source for the large image
      //to be that of the current image
      if (currentImage != null)
         imgLarge.Source = currentImage;
}

This is the basics behind it. You could create a class/UserControl instead for the thumbnails that have a property which point to the larger version of the image. Then, you can set the imgLarge source to be that of the larger version of the image.

Hope that helps.