Создание простой страницы Silverlight

Silverlight 5 --- Создание простой страницы Silverlight

Каждая страница Silverlight содержит разметку (файл XAML), определяющую внешний вид страницы, и файл исходного кода, в котором находятся обработчики событий. Для настройки приложения Silverlight нужно открыть файл MainPage.xaml и добавить разметку.

В рабочей среде Visual Studio каждый файл XAML выводится двумя способами: на графической панели (design surface) и на панели разметки (XAML view). По умолчанию на экране присутствуют обе панели. На рисунке ниже показаны графическая панель и панель разметки, а также кнопки, с помощью которых можно управлять расположением и выводом панелей:

Страницу XAML можно создавать, перетаскивая элементы управления с панели элементов (toolbox) на графическую панель. Однако это не избавляет вас от необходимости изучить все подробности разметки XAML. Ее приходится редактировать вручную всякий раз, когда нужно организовать правильную вложенность элементов управления, изменить их свойства, подключить к ним обработчики событий, связать данные, применить стили, внедрить анимацию, применить шаблоны и т.п.

В терминологии Silverlight каждый графический компонент, выводимый на экран и представленный классом .NET, называется элементом. Термин элемент управления (control) обозначает элемент, который может получать фокус и взаимодействовать с пользователем. Например, элемент TextBox является элементом управления, a TextBlock — нет.

Для начала поэкспериментируйте с приведенной ниже разметкой MainPage.xaml, которая определяет блок текста и кнопку:

<UserControl x:Class="SilverlightSample.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:DesignHeight="100" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <TextBlock x:Name="txbMessage" Text="Привет" Margin="5"/>
            <Button x:Name="ClickMe" Content="Щелкните здесь" Margin="5"/>
        </StackPanel>
    </Grid>
</UserControl>

Приведенная разметка создает страницу, содержащую два элемента: блок текста и кнопку, расположенные по вертикали.

Добавление кода обработки события

Обработчики событий подключаются к элементам страницы с помощью атрибутов. Такой же подход используется в WPF, ASP.NET и JavaScript. Например, элемент Button предоставляет событие Click, которое генерируется при щелчке на элементе кнопкой мыши или нажатии клавиши <Enter>, когда элемент активен. Чтобы задать реакцию на событие, нужно добавить атрибут Click в элемент Button и присвоить атрибуту имя метода, определенного в коде:

<Button x:Name="ClickMe" Content="Щелкните здесь" Margin="5" Click="ClickMe_Click"/>

Методу обработки события рекомендуется присваивать имя вида ИмяЭлемента_ИмяСобытия. Если элемент не имеет определенного имени (например, когда к нему не нужно обращаться в других местах кода), присвойте ему имя, исходя из его назначения.

Приведенный метод обработки события расположен в файле MainPage.xaml.cs:

private void ClickMe_Click(object sender, RoutedEventArgs e)
{
      txbMessage.Text = "До свидания!";
}

В Visual Studio можно создать обработчик события, дважды щелкнув на элементе на графической панели или сначала щелкнув на кнопке Events (События) в окне Properties (Свойства), а затем — на соответствующем событии.

Когда обработчик события существует, его можно быстро подключить к событию с помощью окна подсказки. Для этого введите имя атрибута и знак равенства. В этот момент на экране появится окно подсказки, содержащее список всех методов, которые можно подключить к событию. Двойные кавычки добавляются автоматически при вводе знака равенства. Выберите нужное событие:

Чтобы создать и подключить обработчик события в одной операции, добавьте атрибут события и выберите в окне подсказки элемент <New Event Handler>.

Для быстрого перехода от кода XAML к коду обработчика события щелкните правой кнопкой мыши на атрибуте события в разметке и выберите команду Navigate to Event Handler. При использовании этого способа вам не придется искать обработчик в коде.

Подключить событие к обработчику можно также с помощью кода. Это делается в конструкторе страницы после вызова метода InitializeComponent(), который инициализирует элемент управления. Ниже приведен код конструктора MainPage(), эквивалентный рассмотренной выше разметке XAML:

public MainPage()
{
       InitializeComponent();
       ClickMe.Click += ClickMe_Click;
}

Этот способ полезен при динамическом создании элемента управления, когда подключить событие нужно в некоторый момент времени при активном окне. Для сравнения: события, подключенные в разметке XAML, всегда остаются подключенными. Подключение в коде позволяет упростить разметку XAML. Это полезно, когда над проектом, кроме программистов, трудятся дизайнеры, не умеющие работать с разметкой. Недостаток метода состоит в усложнении кода C#.

Отключить обработчик от события можно только с помощью кода C#. Для этого используется оператор -=, как в приведенном ниже примере:

ClickMe.Click -= ClickMe_Click;

Один и тот же обработчик можно подключить к одному и тому же событию более одного раза. Обычно так происходит вследствие невнимательности программиста. В результате при возникновении события обработчик будет запущен несколько раз. Если попытаться удалить обработчик, подключенный дважды, событие все равно запустит обработчик, но только один раз.

Библиотеки классов Silverlight

Для создания кодов реальных приложений необходимо знать классы, с которыми вы будете работать. Для этого нужно ознакомиться с библиотеками базовых классов, поставляемых с Silverlignt.

Набор классов Silverlight представляет собой упрощенную версию .NET Framework. Упрощение достигнуто двумя способами. Во-первых, в Silverlight представлена только часть типов, доступных в .NET Framework. Во-вторых, многие типы, представленные в Silverlight, содержат ограниченный набор конструкторов, методов, свойств и событий. В Silverlight доступны только наиболее полезные элементы наиболее важных классов, позволяющие решать большинство практических задач.

Многие классы Silverlight имеют открытые интерфейсы, похожие на интерфейсы полнофункциональных классов .NET Framework. Однако "начинка" классов Silverlight существенно иная. Все классы Silverlight написаны заново, а не переделаны из классов .NET Framework. Это сделано для того, чтобы классы Silverlight были как можно проще и эффективнее, поскольку они будут выполняться в браузерах, а не в операционной системе.

Тестирование приложения Silverlight

Теперь у вас есть все необходимое для тестирования проекта Silverlight. При выполнении приложения Silverlight программа Visual Studio запускает браузер, установленный по умолчанию, и передает ему скрытую тестовую страницу TestPage.html. Тестовая страница создает новый элемент управления Silverlight, инициализируя его на основе разметки MainPage.xaml.

Программа Visual Studio устанавливает файл TestPage.html в качестве начальной страницы проекта. В результате при запуске проекта на выполнение страница TestPage.html загружается в браузер. Чтобы задать другую начальную страницу, щелкните правой кнопкой мыши на файле HTML в окне Solution Explorer и выберите команду Set As Start Page (Установить в качестве начальной страницы).

На рисунке ниже показан результат выполнения приведенного выше примера в браузере. При щелчке на кнопке код обработки события изменяет текст. Все операции выполняются в браузере на стороне клиента. Обращаться к серверу и передавать страницу обратно (как в случае использования серверного кода ASP.NET) нет необходимости. Весь код Silverlight выполняется на стороне клиента усеченной версией .NET, внедренной в надстройку Silverlight.

Если содержимое Silverlight используется на обычном сайте (без серверного кода ASP.NET), программа Visual Studio в процессе тестирования не использует веб-сервер. Вместо этого она открывает тестовую страницу HTML непосредственно в файловой системе.

В некоторых ситуациях такое поведение может привести к несоответствию между средой тестирования и средой развертывания, в которой используется полнофункциональный веб-сервер, передающий страницы по протоколу HTTP. Наиболее очевидное отличие — разные контексты безопасности. Иными словами, браузер может быть сконфигурирован таким образом, чтобы разрешить локальным страницам выполнять операции, запрещенные для удаленного содержимого. На практике эта проблема возникает редко, поскольку Silverlight всегда выполняется в ограниченном контексте безопасности и не предоставляет средства доверительных местоположений.

Это упрощает модель развертывания приложений Silverlight и гарантирует работоспособность приложения в любой среде. Однако для окончательного тестирования приложения Silverlight рекомендуется создать тестовый сайт ASP.NET или, еще лучше, развернуть приложение на тестирующем веб-сервере.