Как нарисовать маленькое изображение поверх большого изображения, нажав и очистив Touch

Question

Хотел создать веселое приложение с фото. Это сценарий:

1. У меня есть фото размером 640X 480 на странице (в качестве фона)
2. Отображение эскиза на левой стороне 100x100

Это проблемы, которые я хотел решить:

1. Пользователь выбирает миниатюру фотографии 100x100 слева
2. Пользователь нажимает или щелкает в любом месте большой фотографии (640x480), после нажатия она рисует миниатюру. В каком формате использовать миниатюру Png или Jpg, чтобы при ее рисовании фон миниатюры был прозрачным.
3. Пользователь может очистить миниатюру, коснувшись миниатюры.

Answer 1

а) Самый простой способ - просто обработать метод ManipulationStarted эскиза и установить этот эскиз в качестве текущего эскиза.Кроме того, обработайте метод ManipulationStarted для более крупной фотографии и проверьте, существует ли current thumbnail.Если это так, установите источник изображения большего размера в качестве источника миниатюр.

b) Если вам нужна прозрачность, вам придется использовать PNG.Если вам не нужна прозрачность, используйте JPG (для эффективности).

c) Установите для источника миниатюрного изображения значение null, чтобы очистить его.

РЕДАКТИРОВАТЬ - это один из способов сделать то, что вы хотите.Конечно, вместо отдельных изображений вы можете использовать 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;
}

Это основные принципы.Вместо этого вы можете создать класс / UserControl для миниатюр, которые имеют свойство, указывающее на увеличенную версию изображения.Затем вы можете установить источник imgLarge как источник большей версии изображения.

Надеюсь, это поможет.