Silverlight 4: Создание насыщенных Web-приложений

Серия «Библиотека профессионала»
С. С. Байдачный
SILVERLIGHT 4:
СОЗДАНИЕ НАСЫЩЕННЫХ
WEB-ПРИЛОЖЕНИЙ
Москва
СОЛОН-ПРЕСС
2010
2021

УДК 621.396.218
ББК 32.884.1
Б18
Байдачный С. С.
Б18
Silverlight 4: Создание насыщенных Web-приложений — М.: СОЛОНПРЕСС, 2010. — 288 с.: ил. — (Серия «Библиотека профессионала»).
2021
ISBN 978-5-91359-079-4
Silverlight 4 — новая технология от Microsoft, предназначенная для разработки
насыщенных Web-приложений, или приложений с «богатым» интерфейсом. Основные характеристики Silverlight-приложений — это интенсивное использование
графики, анимации, работа с медиа-файлами, а также эффективное взаимодействие с данными и серверными компонентами. При этом разработчик имеет возможность не только использовать управляемые языки программирования (C#,
VB.NET) для разработки Silverlight-приложений, но и получить доступ к большинству преимуществ, доступных в .NET Framework. Если взять во внимание, что
процесс разработки Silverlight-приложений тесно интегрирован в Visual Studio, то
можно утверждать, что использование Silverlight не вызовет затруднений у существующих .NET разработчиков.
Данная книга может быть полезна для всех, кто решил изучить Silverlight 4 и
уже имеет общие познания в разработке приложений на платформе .NET.
УДК 621.396.218
ББК 32.884.1
КНИГА — ПОЧТОЙ
Книги издательства «СОЛОН-ПРЕСС» можно заказать наложенным платежом (оплата
при получении) по фиксированной цене. Заказ оформляется одним из трех способов:
1. Послать письмо с пустым конвертом по адресу: 123001, Москва, а/я 82.
2. Оформить заказ можно на сайте www.solon-press.ru в разделе «Книга — почтой».
3. Заказать по тел. (495) 254-44-10, (499) 252-36-96 или по e-mail: kniga@coba.ru.
Бесплатно высылается каталог издательства по почте. Для этого присылайте конверт
с маркой по адресу, указанному в п. 1.
При оформлении заказа следует правильно и полностью указать адрес, по которому должны быть высланы книги, а также фамилию, имя и отчество получателя.
Желательно указать дополнительно свой телефон и адрес электронной почты.
Через Интернет Вы можете в любое время получить свежий каталог издательства
«СОЛОН-ПРЕСС», считав его с адреса www.solon-press.ru/kat.doc.
Интернет-магазин размещен на сайте www.solon-press.ru.
По вопросам приобретения обращаться:
Тел: (495) 254-44-10, (499) 795-73-26
Сайт издательства СОЛОН-ПРЕСС: www.solon-press.ru
E-mail: kniga@coba.ru
2021
ISBN 978-5-91359-079-4
© Байдачный С. С., 2010
© Макет и обложка «СОЛОН-ПРЕСС», 2010
2021

От автора
В ноябре 2009 года мне довелось побывать на Professional Developers
Conference (PDC) 09, где, среди прочих анонсов, была представлена четвертая
версия технологии Silverlight. Параллельно с анонсом Silverlight 4 были опубликованы новые данные, показывающие доступность предыдущих версий
Silverlight на компьютерах пользователей — этот показатель составил 45%.
Сегодня, в начале февраля 2010 года, заканчивая работу над этой книгой, я
обратился на сайт http://riastats.com, чтобы получить последние данные по доступности Silverlight. Этот показатель составил более 50%. Таким образом, чуть
более чем за два года (Silverlight 1 появился в сентябре 2007 года) Silverlight завоевал более половины компьютеров по всему миру.
Если говорить о том, что меня привлекает в Silverlight, то можно выделить
следующие преимущества:

 интеграция Silverlight в существующую платформу. Разработка Silverlight-приложений возможна на управляемом языке программирования
(C# или VB.NET), при этом Silverlight поддерживает основные компоненты, доступные в .NET Framework и позволяет использовать те же
подходы, что при разработке Windows- или ASP.NET-приложений. Это
очень важный факт, так как в отличие от PHP- или Java-разработчика,
разработчик на платформе .NET способен создавать приложения любого типа (разве что не драйвера);

 возможность создания корпоративных приложений. Несмотря на небольшой размер встраиваемого компонента Silverlight (чуть более 4 Мб),
сюда входит достаточно большой набор элементов управления, позволяющий создавать интерфейсы любой сложности. Помимо базовых элементов, в Silverlight доступен дополнительный набор в пакете SDK и
Silverlight Toolkit, куда входят такие элементы как Grid, элементы для построения графиков и диаграмм, механизмы навигации внутри приложения. И, наконец, Silverlight поддерживает работу приложений вне браузера, где есть возможность не только установить приложение на компьютер
пользователя, но и предоставить ему дополнительные права, позволяющие взаимодействовать с COM API. Все это позволяет приблизить
Silverlight-приложения по функциональности к Windows-приложениям;

 поддержка Silverlight в средствах разработки. Если Вы разрабатываете
Silverlight-приложения, то можете использовать среду разработки Visual
Studio 2010, которая используется для разработки всех типов приложений
на платформе .NET. В Visual Studio 2010 присутствуют не только шаблоны соответствующих проектов, но и визуальный редактор, позволяющий
создавать интерфейсы с использованием Drag & Drop. В свою очередь,
если в Вашем приложении необходима помощь дизайнера, то тут можно

От автора
использовать новое средство разработки интерфейсов Microsoft Expression Blend. Этот продукт работает с проектами в формате Visual Studio и
ориентирован на визуальное создание интерфейсов. Фактически, это
первый продукт, который позволил построить «мост» между дизайнерами
и разработчиками.
Поскольку я являюсь разработчиком, то в этой книге речь пойдет в основном о создании приложений средствами Visual Studio, опуская возможности редактора Blend. Изучение Silverlight 4 мы начнем с новых возможностей
этой технологии, после чего перейдем к архитектуре и работе с элементами
управления. Несмотря на то, что большая часть книги посвящена корпоративным приложениям, мы затронем возможности, связанные с графикой и анимацией. Закончим мы наш обзор вопросами отладки, тестирования и повышения производительности Silverlight-приложений. Поэтому, смею полагать,
что данная книга содержит всю необходимую информацию для разработчика
и позволит приступить к созданию даже самых сложных приложений.

Глава 1
ВВЕДЕНИЕ В SILVERLIGHT 4
Наверняка, если Вы уже сталкивались с Silverlight, то интересуетесь новыми возможностями, которые появились в четвертой версии. Поэтому, первая
глава посвящена обзору Silverlight 4. Тут описаны практически все новые возможности технологии, с которыми мы будем встречаться по ходу книги.
Если Вы еще не сталкивались с Silverlight, то переходите сразу ко второй
главе.
Поддержка Drag&Drop
Обзор новых возможностей начнем с простого, но приятного нововведения в Silverlight 4 — поддержки функциональности Drag&Drop. Естественно,
речь идет не о том, как перемещать элементы внутри самого Silverlight-приложения (это легко сделать и в первой версии), а как передать приложению
внешний объект, находящийся на машине пользователя.
В качестве примера использования Drag&Drop в вебе можно рассмотреть
сценарий, когда с помощью Silverlight-приложения пользователь выполняет
загрузку файла на сервер: добавляет фотографию в свой профиль; загружает
файл в свое хранилище на Skydrive и т. д. Все эти сценарии можно реализовать с помощью дополнительного диалогового окна, но Drag&Drop позволит
добавить некоторую «изюминку» вашему интерфейсу.
Чтобы продемонстрировать использование Drag&Drop, разработаем приложение, в окно которого можно перетянуть несколько изображений (в формате, поддерживаемом Silverlight) и отобразить их.
Для реализации Drag&Drop механизма в Silverlight 4 присутствует очень
полезное свойство AllowDrop, которое доступно у любого из наследников
UIElement, то есть у любого из визуальных элементов, включая элементы
компоновки и графические примитивы. Это означает, что можно реализовать механизм «перетаскивания» внешнего объекта на любой из визуальных
элементов.
Устанавливая свойство AllowDrop в значение True, разработчик инициирует работу четырех событий, которые можно использовать для реализации
Drag&Drop функциональности: Drop, DragEnter, DragLeave, DragOver. Основным событием является Drop, именно оно генерируется при завершении операции перетаскивания объекта. Остальные три события генерируются при перемещении курсора мыши, захватившего объект, но до завершения операции

Глава 1. Введение в Silverlight 4
перетаскивания, то есть эти события являются вспомогательными и могут
быть использованы для дополнительной визуализации процесса перетаскивания в интерфейсе (например, выделение цветом областей, доступных для освобождения объекта).
Реализуем простой интерфейс, содержащий кнопку и панель типа Canvas.
Объект на основе Canvas подходит для наших целей лучше всего, так как позволяет привязать отображаемое изображение к координатам курсора мыши.
<UserControl x:Class="DragAndDrop_Chapter0.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="printButton" Content="Print" Width="100">
</Button>
<Border Grid.Row="1" x:Name="photoBorder"
BorderBrush="Blue" BorderThickness="4">
<Canvas x:Name="photoPanel" Grid.Row="1"
Background="Gray" AllowDrop="True"
Drop="photoPanel_Drop"
DragEnter="photoPanel_DragEnter"
DragLeave="photoPanel_DragLeave">
</Canvas>
</Border>
</Grid>
</UserControl>
В приведенном выше коде панель photoPanel будет использоваться для
отображения изображений, перетянутых с компьютера пользователя. Тут же
мы определили свойство AllowDrop, установленное в True, и указали обработчики событий. Кнопка printButton нам понадобится в следующем разделе.
Ниже показана реализация описанных выше обработчиков событий Drop,
DragEnter, DragLeave.
private void photoPanel_Drop(object sender, DragEventArgs e)
{
photoBorder.BorderBrush = new SolidColorBrush(Colors.Blue);
IDataObject data = e.Data;
FileInfo[] files = (FileInfo [])data.GetData
(DataFormats.FileDrop);
int i=0;
foreach (FileInfo f in files)
{
Stream s=f.OpenRead();
BitmapImage bitmap=new BitmapImage();
bitmap.SetSource(s);
Image img = new Image();

Глава 1. Введение в Silverlight 4
7
img.Source = bitmap;
img.Width = 100;
img.Height = 80;
Point p = e.GetPosition(photoPanel);
img.Margin = new Thickness(p.X+10*i, p.Y+8*i, 0, 0);
i++;
photoPanel.Children.Add(img);
}
}
private void photoPanel_DragEnter(object sender, DragEventArgs e)
{
photoBorder.BorderBrush = new SolidColorBrush(Colors.Red);
}
private void photoPanel_DragLeave(object sender, DragEventArgs e)
{
photoBorder.BorderBrush = new SolidColorBrush(Colors.Blue);
}
Последние два события мы обрабатываем лишь с целью выделить область, доступную для размещения перетаскиваемого объекта (тут нужно помнить, что при генерации события Drop, событие DragLeave уже не генерируется, поэтому нужно снять выделение). А вот основную работу делает обработчик события Drop: получение информации о передаваемых файлах, открытие
Рис. 1.1. Результат работы приложения

Глава 1. Введение в Silverlight 4
потока, загрузка и отображение изображения с помощью Pixel API (одно из
новшеств Silverlight 3).
Чтобы сделать код более читабельным, мы не обрабатываем ошибки, связанные с типом файлов, но в реальной задаче это необходимо сделать обязательно (попробуйте в этом примере перетащить текстовый файл или офисный
документ и Вы получите ошибку).
Чтобы продемонстрировать работу нашего приложения, выберите одно
или несколько изображений на вашем компьютере и попробуйте перетащить
его в окно приложения. Уменьшенное изображение отобразится по текущим
координатам (рис. 1.1).
Печать из Silverlight-приложений
Одна из важных и фундаментальных возможностей, которая должна значительно расширить возможности Silverlight-приложений, это печать.
Для демонстрации возможности печати будем использовать предыдущий
пример, определив обработчик события Click для кнопки printButton, объект
типа PrintDocument и обработчик события PrintPage. Вот как будет выглядеть
наш код:
private PrintDocument printDoc=new PrintDocument();
public MainPage()
{
InitializeComponent();
printDoc.PrintPage += new
EventHandler<PrintPageEventArgs>(printDoc_PrintPage);
}
void printDoc_PrintPage(object sender, PrintPageEventArgs e)
{
e.PageVisual = photoPanel;
e.HasMorePages = false;
}
private void printButton_Click(object sender, RoutedEventArgs e)
{
printDoc.DocumentName = "Images";
printDoc.Print();
}
Как видно из этого примера, за печать в Silverlight отвечает класс
PrintDocument. Объект этого класса способен генерировать три события:
StartPrint, EndPrint и PrintPage. Первые два события позволяют провести предварительную подготовку к печати и получить информацию об успешном завершении печати соответственно. А вот обработчик события PrintPage, как раз
и выполняет всю черновую работу. Задача обработчика события PrintPage —
получить параметры страницы (тут только длина и ширина отображаемой об

Глава 1. Введение в Silverlight 4
9
ласти), используя параметр типа PrintPageEventArgs, сформировать содержимое страницы и отправить ее на печать.
Фактически, объект типа PrintDocument способен печатать любой элемент, порожденный от UIElement, то есть, для печати страницы Вы можете
выбрать любой из контейнеров, расположить в нем свои элементы и передать
ссылку на этот контейнер с помощью свойства PageVisual. После этого
UIElement преобразуется в картинку, и происходит его печать.
В примере выше мы не формировали специальную страницу для печати, а
просто использовали существующий контейнер, отображающий наши картинки.
В завершение хочу отметить, что при реализации печати необходимо помнить о важном свойстве HasMorePages. Именно благодаря этому свойству у
программиста появляется возможность печатать не одну, а несколько страниц. Как только печать закончена, свойство нужно установить в false.
Обработка нажатия правой кнопки мыши
Еще с выходом Silverlight 1, многие разработчики начали жаловаться на то,
что не могут реализовать собственное контекстное меню при нажатии правой
кнопки мыши в своем приложении. Действительно, правая кнопка полностью
принадлежала Silverlight, а пользователь мог вызвать только контекстное
меню, позволяющее получить доступ к настройкам встраиваемого компонента.
Silverlight 4 позволяет полностью переопределить поведение при нажатии
правой кнопки мыши. При этом программист вовсе не обязан отображать
меню. Действие может полностью зависеть от самого приложения.
Чтобы переопределить работу правой кнопки мыши, достаточно выполнить два действия:
1. Отключить существующее меню. Для этого нужно определить обработчик с события MouseRightButtonDown и установить свойство Handled в true.
Это сигнализирует о том, что мы берем обработку события на себя и стандартное меню отображать не нужно;
2. Определить вызов собственного меню (или любые другие действия) в
обработчике события MouseRightButtonUp.
Расширим функционал предыдущего приложения, добавив контекстное
меню к изображениям на панели. Для этого расширим метод photoPanel_Drop,
добавив следующий код:
img.MouseRightButtonDown += new
MouseButtonEventHandler(img_MouseRightButtonDown);
img.MouseRightButtonUp += new
MouseButtonEventHandler(img_MouseRightButtonUp);
Теперь реализуем сами обработчики событий. Начнем с MouseRightButtonDown:
void img_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

Глава 1. Введение в Silverlight 4
Как видно, тут нет ничего сложного. Мы просто нотифицируем Silverlight
о перехвате события правой кнопки и подавляем отображение стандартного
контекстного меню.
После этого реализуем MouseRightButtonUp. Тут есть проблема, которая
состоит в том, что если Вы хотите отобразить меню, то его нужно реализовать
самостоятельно, или обратиться к сторонним разработчикам за дополнительными компонентами. В списке стандартных компонент и в SDK контекстное
меню пока не реализовано. Я не стал разрабатывать меню сам, а установил
тестовую версию с сайта: http://www.telerik.com. Тут Вы можете найти множество элементов управления для Silverlight 4.
Замечание. Никогда не используйте контекстное меню от Telerik так, как показано ниже. Компонент достаточно «умный», чтобы отобразить меню в качестве реакции на какое-то событие. Кроме того, этот элемент можно ассоциировать с любым интерфейсным элементом в момент его создания в
XAML. Но, если сделать все правильно, то обработчик события для правой
кнопки мыши не понадобится 
. Поэтому будем создавать меню именно при
нажатии правой кнопки мыши и уничтожать его в «ручном» режиме.
private Image menuImage;
private RadContextMenu contextMenu;
void img_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
menuImage = (Image)sender;
if (contextMenu != null)
{
photoPanel.Children.Remove(contextMenu);
}
contextMenu = new RadContextMenu();
contextMenu.Items.Add("Delete");
contextMenu.Items.Add("Close Menu");
Point p=e.GetPosition(photoPanel);
contextMenu.Margin = new Thickness(p.X, p.Y, 0, 0);
photoPanel.Children.Add(contextMenu);
contextMenu.ItemClick += new
Telerik.Windows.RadRoutedEventHandler(menu_ItemClick);
}
void menu_ItemClick(object sender,
Telerik.Windows.RadRoutedEventArgs e)
{
RadRoutedEventArgs args = e as RadRoutedEventArgs;
RadMenuItem menuItem = args.OriginalSource as RadMenuItem;
string tag = Convert.ToString(menuItem.Header);
switch (tag)
{
case "Delete":
photoPanel.Children.Remove(menuImage);
photoPanel.Children.Remove(contextMenu);