18.4. Интеграция интернет-магазина с Silverlight-приложением
Для того чтобы разработать приложение на технологии Silverlight откроем сайт в Microsoft Visual Studio 2008 и добавим в решение еще один проект. В качестве шаблона выберем Silverlight Application в разделе Silverlight как это показано на рис. 18.10.
Рис. 18.10. Добавление в решение нового Silverlight проекта
При добавлении появится окно, представленное на рис. 18.11. Оно позволяет указать, где будет "хоститься" новое приложение, будет ли доступна отладка этого приложения и необходимо ли создавать тестовые страницы.
Рис. 18.11. Окно создания нового Silverlight проекта
Необходимости менять заданные по умолчанию значения у нас нет. Можно отказаться от создания тестовых страниц, чтобы не создавать лишних файлов в сайте AWCDShop, тем более что на них может случайно зайти пользователь.
После создания проекта Silverlight-приложения (в дальнейшем – SilverlightDeepZoom) в сайт будет добавлен файл Silverlight.js, который содержит служебный код, необходимый для работы Silverlight, а также папка ClientBin, куда будет помещаться откомпилированное Silverlight приложение и все необходимые для его работы ресурсы.
Наша задача заключается в том, чтобы не только воссоздать приложение, аналогичное по функциональности тому, которое создается Expression Web автоматически, но и расширить его функционал, добавив возможность получать информацию о продукте, если он занимает всю видимую область приложения.
Примечание: алгоритм, разработанный в этом примере для определения того, что изображение занимает всю область приложения, достаточно прост, но в то же время не претендует на то, чтобы давать хороший результат и обеспечивать удобство работы. Очевидно, что пользователю было бы удобней, если бы информация о продукте появлялась в том случае, если его изображение сейчас находится в центре приложения и занимает около 90 процентов видимого пространства.
18.4.1. Разработка пользовательского компонента на основе MultiScaleImage
В созданный проект SilverlightDeepZoom будет автоматически добавлена страница MainPage.xaml. Ее код мы доработаем следующим образом:
<UserControl x:Class="SilverlightDeepZoom.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="0.639*"/>
<ColumnDefinition Width="0.361*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8"/>
<RowDefinition Height="64"/>
<RowDefinition Height="64"/>
<RowDefinition Height="64"/>
<RowDefinition Height="64"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<MultiScaleImage x:Name="ZoomImage" Source="dzc_output.xml" MouseLeftButtonDown="ZoomImage_MouseLeftButtonDown"
MouseLeftButtonUp="ZoomImage_MouseLeftButtonUp"
MouseMove="ZoomImage_MouseMove"
ImageOpenSucceeded="ZoomImage_ImageOpenSucceeded"
MotionFinished="ZoomImage_MotionFinished"
Grid.Row="0" Grid.RowSpan="6" Grid.Column="0"
Grid.ColumnSpan="4"/>
<Image Source="home.png" MouseLeftButtonUp="Home_Click" x:Name='Home'
Grid.Row="1" Grid.Column="1" ></Image>
<Image Source="zoomin.png" MouseLeftButtonUp="ZoomIn_Click" x:Name='ZoomIn'
Grid.Row="2" Grid.Column="1" />
<Image Source="zoomout.png" MouseLeftButtonUp="ZoomOut_Click" x:Name='ZoomOut'
Grid.Row="3" Grid.Column="1"/>
<Rectangle x:Name="InformationPanel" Fill="White" Stroke="Black"
Grid.Column="3" Grid.RowSpan="6" Opacity="0.8" Visibility="Collapsed">
</Rectangle>
<Image x:Name="ProductImage" Margin="2,1,1,1"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="3"/>
</Grid>
</UserControl>
Разберем приведенный выше код. В начале объявляется новый Silverlight компонент, с названием SilverlightDeepZoom.MainPage и установлено шириной в 640 пикселей, а высотой в 480 пикселей. Далее идет определение разметки страницы, состоящей из 4 колонок (2 с фиксированной шириной в 8 и 64 пикселя, а 2 делят оставшееся пространство в отношении примерно 2 к 1) и 6 строк, первые 5 из которых имеют фиксированную высоту. После разметки определяется объект типа MultiScaleImage с именем ZoomImage, который отвечает за отображение Deep Zoom. В атрибутах указан источник (Source) данных для отображения, несколько обработчики событий, а также задано, что компонент располагается в левой верхней ячейке и занимает 6 строк и 4 столбца, то есть весь экран. За компонентом MultiScaleImage следует определение 3 изображений с обработчиками нажатия по ним мышкой. При этом, так как они определены после MultiScaleImage, то они будут отображаться поверх него. Далее определена полупрозрачная панель InformationPanel, изначально невидимая и еще одно изображение, которое за счет указанного расположения будет отображаться поверх панели. Так как при этом атрибут Source изображения не указан, то при старте приложения, изображение отображаться не будет.
Примечание: создавать сложный дизайн приложений вручную, набирая XAML-код неудобно. Для этих целей используется продукт Microsoft Expression Blend, который позволяет визуально редактировать WPF и Silverlight интерфейсы. Разработанный компонент в Expression Blend будет выглядеть так, как представлено на рис. 18.12. Подробнее ознакомиться с продуктом Microsoft Expression Blend можно по этой ссылке: http://blogs.msdn.com/expression/.
Рис. 18.12. Отображение страницы SilverlightDeepZoom.MainPage в Microsoft Expression Blend
Теперь, когда внешний вид приложения разработан, необходимо реализовать логику его работы.