18.4.3. Отображение

Если сейчас запустить разработанное приложение в тестовой странице, то оно отобразит набор изображений, но работать с ними не получится. Для того чтобы придать приложению интерактивность, определим код обработчиков нажатия на кнопки "Домой", "Приблизить" и "Удалить", обработчиков вращения колесика мышки, а также нажатия левой кнопки мыши и движения курса мыши по приложению.

Полный код этих обработчиков можно посмотреть в приведенном примере, здесь рассмотрим только обработчики нажатия мышью на кнопки "Домой" и "Приблизить".

private void Home_Click(object sender, MouseButtonEventArgs e)

{

InformationPanel.Visibility = Visibility.Collapsed;

ProductImage.Visibility = Visibility.Collapsed;

ZoomImage.ViewportOrigin = new Point(0, 0);

ZoomImage.ViewportWidth = 1;

zoom = 1;

}

private void ZoomIn_Click(object sender, MouseButtonEventArgs e)

{

double newzoom = zoom/1.3;

if (newzoom < minzoom)

{

newzoom = minzoom;

}

Point logicalPoint = ZoomImage.ElementToLogicalPoint(new Point(ActualWidth/2, ActualHeight/2));

ZoomImage.ZoomAboutLogicalPoint(zoom/newzoom, logicalPoint.X, logicalPoint.Y);

zoom = newzoom;

var i = GetIntersectImage();

if (i > 0)

{

InformationPanel.Visibility = System.Windows.Visibility.Visible;

ProductImage.Visibility = System.Windows.Visibility.Visible;

}

else

{

InformationPanel.Visibility = System.Windows.Visibility.Collapsed;

ProductImage.Visibility = System.Windows.Visibility.Collapsed;

}

}

В обработчике Home_Click мы скрываем панель и изображение ProductImage, после чего строкой ZoomImage.ViewportOrigin = new Point(0, 0) устанавливаем верхний левый угол приложения в начальную точку (в случае использования одной картинки – это также ее левый верхний угол), а строкой ZoomImage.ViewportWidth = 1 устанавливаем текущий масштаб так, чтобы отобразилась целиком вся композиция изображений.

Примечание: подробнее узнать о том, как работают свойства ViewportOrigin и ViewportWidth можно по этой ссылке: http://msdn.microsoft.com/en-us/library/system.windows.controls.multiscaleimage.viewportorigin%28VS.95%29.aspx

В обработчике ZoomIn_Click определяется новый масштаб. Далее, при помощи метода ElementToLogicalPoint определяются логические координаты центра приложения, после чего вызывается метод ZoomAboutLogicalPoint, который выполняет изменение масштаба изображения относительно указанной точки. В нашем случае масштаб будет уменьшен в 1.3 раза относительно центра.

Далее вызывается метод GetIntersectImage, который определяет, занимает ли какое-либо изображение все видимое пространство приложения, и если такое изображение найдено, то возвращает его порядковый номер и присваивает ProductImage ссылку на файл, имя которого берется из CollectionImage.Tag, то есть из тэга самого изображения. Если подходящее изображение найдено, необходимо сделать видимыми информационную панель с элементом ProductImage.

Ниже приведен код метода GetIntersectImage:

private int GetIntersectImage()

{

for (int i = 0; i < ZoomImage.SubImages.Count; i++)

{

MultiScaleSubImage subImage = ZoomImage.SubImages[i];

double scaleBy = 1/subImage.ViewportWidth;

Rect rect = new Rect(-subImage.ViewportOrigin.X*scaleBy,

-subImage.ViewportOrigin.Y*scaleBy,

1*scaleBy,

(1/subImage.AspectRatio)*scaleBy);

Point p1 = ZoomImage.ViewportOrigin;

Point p2 = ZoomImage.ElementToLogicalPoint(new Point(ZoomImage.ActualWidth, 0.0));

Point p3 = ZoomImage.ElementToLogicalPoint(new Point(0.0, ZoomImage.ActualHeight));

Point p4 = ZoomImage.ElementToLogicalPoint(new Point(ZoomImage.ActualWidth, ZoomImage.ActualHeight));

if (rect.Contains(p1) && rect.Contains(p2) && rect.Contains(p3) && rect.Contains(p4))

{

BitmapImage bmi = new BitmapImage

(new Uri( "../ProductImages/" +_images[i].Tag+ ".png", UriKind.Relative))

{CreateOptions = BitmapCreateOptions.None};

ProductImage.Source = bmi;

return i;

}

}

return -1;

}

Этот метод в цикле пробегает по всем изображениям из ZoomImage.SubImages и определяет логические координаты вершин, представляя изображение в виде объекта класса Rect. Затем определяются логические координаты вершин приложения, и если все вершины лежат внутри прямоугольника, представляющего изображение, то метод возвращает его номер.