
- •18. Практическое занятие: Применение элементов ria в Интернет-магазине
- •18.1. Описание Deep Zoom
- •18.2. Работа с Deep Zoom Composer
- •18.2.1. Меню
- •18.2.2. Внутренние ссылки
- •18.2.3. Тэги
- •18.2.4. Различные способы экспорта из Deep Zoom
- •18.3. Подключение Deep Zoom на страницу через Expression Web
- •18.4. Интеграция интернет-магазина с Silverlight-приложением
- •18.4.1. Разработка пользовательского компонента на основе MultiScaleImage
- •18.4.2. Работа с изображениями
- •18.4.3. Отображение
- •18.4.4. Установка приложения Silverlight на страницу
- •18.5. Способы подключения видео
- •18.5.1. Использование Windows Media Player
- •18.5.2. Использование Silverlight-плеера
- •18.5.3. Разработка Silverlight-плеера с динамическим контентом
- •18.6. Ключевые термины
- •18.7. Краткие итоги
18.4.2. Работа с изображениями
Прежде всего, опишем вспомогательный класс CollectionImage, который будет хранить данные о каждом изображении, используемом в коллаже. Для того чтобы связать объекты этого класса с изображениями, которые будут использоваться в MultiScaleImage, сделаем в классе CollectionImage ссылку MultiScaleSubImage Image, которая будет указывать на соответствующий элемент в коллекции изображений ZoomImage.SubImages. Также в свойствах будет храниться положение изображение, его ширина и высота, порядковый номер и тег.
public class CollectionImage
{
public MultiScaleSubImage Image { get; set; }
public Point Location { get; set; }
public double Width { get; set; }
public double Height { get; set; }
public int ZOrder { get; set; }
public string Tag { get; set; }
}
Примечание: если во время работы Deep Zoom Composer на этапе экспорта был выбран вариант экспорта в виде одного изображения то коллекция ZoomImage.SubImages будет пустой.
Теперь добавим в класс страницы MainPage в файле MainPage.xaml.cs список CollectionImage, в котором будем хранить все данные об используемых изображениях.
ObservableCollection<CollectionImage> _images = new ObservableCollection<CollectionImage>();
При запуске приложения необходимо заполнить коллекцию _images. Это можно сделать, создав обработчик события ImageOpenSucceeded объекта ZoomImage. Когда это событие срабатывает, коллекция ZoomImage.SubImages уже заполнена, однако объекты типа MultiScaleSubImage не хранят данных, конторе были указаны в поле Tag в Deep Zoom Composer. Для того чтобы их загрузить необходимо прочитать сгенерированный файл Metadata.xml. Так как приложение запускается в браузере на клиенте, а файл хранится на сервере, то мы воспользуемся классом WebClient, метод DownloadStringAsync которого позволяет скачивать файлы с сервера. Когда файл скачен, срабатывает событие DownloadStringCompleted. Определив обработчик этого события, мы сможем разобрать скаченный файл. Так как это XML-файл, то имеет смысл воспользоваться классом XDocument чтобы его разобрать.
private void ZoomImage_ImageOpenSucceeded(object sender, RoutedEventArgs e)
{
duringOpen = true;
WebClient wc = new WebClient();
wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
wc.DownloadStringAsync(new Uri("Metadata.xml", UriKind.Relative));
}
private void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Cancelled == false && e.Error == null)
{
string s = e.Result;
XDocument doc = XDocument.Parse(s);
var images = from a in doc.Element("Metadata").Descendants("Image")
select a;
foreach (XElement image in images)
{
CollectionImage ci =
new CollectionImage
{
Height = Convert.ToDouble(image.Element("Height").Value),
Width = Convert.ToDouble(image.Element("Width").Value),
ZOrder = Convert.ToInt32(image.Element("ZOrder").Value) – 1,
Tag = (string) image.Element("Tag").Value,
Location = new Point {X = Convert.ToDouble( image.Element("x").Value),
Y = Convert.ToDouble( image.Element("y").Value)}
}
;
ci.Image = ZoomImage.SubImages[ci.ZOrder];
_images.Add(ci);
}
}
}
Стоит обратить внимание, что значение ZOrder изображений в файле Metadata.xml начинается с 1, в то время, как индекс коллекции ZoomImage.SubImages начинается с 0. Поэтому значение свойства ZOrder объектов CollectionImage будет на 1 меньше, чем то, что указано в файле.