Silverlight: первый пример
Эта статья предназначена для тех, кто уже знаком с C# и Windows Form, но никогда не работал с WPF и Silverlight. Microsoft очередной раз поменяла правила, и теперь мы вынуждены изучать новые технологии, которые частично отличаются от привычных подходов. Я не случайно упомянул о WPF, так как Silverlight и WPF имеют общие корни и используют одинаковый подход к созданию приложений при помощи XAML.
Я постараюсь максимально просто и понятно объяснить основные особенности при программировании на Silverlight. По традиции в качестве примера будет использован стандартный проект Здравствуй, мир!
Проект будет разрабатываться на Visual Studio 2010, но в данном случае это не принципиально. Поэтому, если вы еще не перешли на новую версию среды разработки, то можете использовать и VS2008.
Среда разработки
Запустим Visual Studio и посмотрим, как создавать новые проекты для Silverlight.
Если вы раньше выбирали подгруппу Windows для разработки стандартных приложений, то теперь вам нужно выбирать подгруппу Silverlight, в которой находятся несколько типов шаблонов: Silverlight Application, Silverlight Class Library и Silverlight Navigation Application.
Для нашего первого примера возьмем шаблон Silverlight Navigation Application и присвоим своему проекту имя SilverlightHelloWorld.
В следующем окне вам нужно выбрать тип проекта.
На первых порах советую использовать настройки по умолчанию и выбирать ASP.NET Web Application Project. В этом случае вам будет проще отлаживать код и не придется использовать различные веб-сервисы. С другими типами проектов (ASP.NET Web Site или ASP.NET MVC Project) вы познакомитесь позже. Сейчас в этом нет никакой необходимости.
Структура проекта
Итак, вы присвоили имя новому проекту и выбрали его тип. Откроется заготовка для проекта в среде разработки. Для начала изучим структуру стандартного проекта, которую можно видеть в правой части экрана:
Вы можете видеть множество различных файлов, которые были созданы без нашего участия. Изучим их повнимательнее.
Итак, наибольший интерес для нас представляют следующие файлы:
- App.xaml – очень важный для приложения, в котором описаны ресурсы и различные глобальные события. Также в этом файле содержится точка входа в программу. А также содержатся инструкции для плагина Silverlight.
- MainPage.xaml – это страница, которая является часть выбранного вами шаблона. По умолчанию, страница имеет имя MainPage, но вы можете выбрать свое имя при желании. При помощи кода в этом файле мы можем настроить интерфейс будущей программы.
- папки Assets/Views – в папках содержатся вспомогательные файлы: картинки, стили и т.п.
XAML-файлы позволяют визуализировать интерфейс программы. Файлы XAML основаны на XML и имеют свой язык разметки, который мы будем менять в этом примере.
Забегая чуть вперед, скажу, что после компиляции проекта в папке ClientBin появится также новый файл с расширением XAP. На самом деле это обычный архивный ZIP-файл, имеющий другое расширение. Вы можете переименовать его в ZIP и открыть любым архиватором, чтобы просмотреть содержимое файла. XAP-файл предназначен для вашего браузера. Не будем углубляться пока в детали.
Для просмотра приложения используются две тестовые страницы для ASP.NET, и HTML. Содержание страниц одинаково, поэтому один из этих файлов вы можете безболезнено удалить. Если вы удалите тестовую страницу для ASP.NET, то вам нужно сделать оставшуюся тестовую страницу SilverlightHelloWorldTestPage.html сделать стартовой (через контекстное меню выберите команду Set As Start Page).
Добавляем элементы интерфейса для XAML-страниц
В нашем шаблоне, который мы выбрали для примера, имеются некоторые возможности для навигации (это видно по названию шаблона). В папке Views имеются файлы About.xaml, ErrorWindow.xaml и Home.xaml. Сосредоточимся на файле Home.xaml, который первым выводится на экран при запуске. Откройте файл двойным щелчком и вы увидите код, который хранится в файле.
Рассматривая XAML-код, можно увидеть, что содержимое страницы содержится в контейнере Grid, например, такие стандартные элементы, как StackPanel и TextBlock. Элемент TextBlock предназначен для вывода текста и является аналогом элемента Label, знакомого вам по WinForm. Запустите приложение (F5), не внося никаких изменений, чтобы увидеть, что из себя представляет программа. Вы увидите следующее окно:
Обратите внимание на кнопки-ссылки в верхнем правом углу. Они отвечают за навигацию. Давайте теперь добавим свой код, чтобы понять, как работать с XAML.
Предположим, мы хотим добавить кнопку. В файле Home.xaml, который у вас открыт, напишите после после второго TextBlock следующее:
<Button Content="Click me" x:Name="MyButton" FontSize="18" Width="150" Height="45" />
Вы уже заметили, что XAML-редактор состоит из двух частей. И когда вы пишете код, то в окне Design в интерактивном режиме сразу появляются описываемые элементы управления. После того, как вы напечатали указанный код, то увидите кнопку с заданными параметрами после текста Home page content. Обратите внимание на атрибут x:Name. Это уникальный идентификатор для элемента и, именно, по этим идентификатором мы сможем обращаться к элементам из кода. Любая уважающая себя кнопка позволяет пользователю щелкать по ней мышью. Вот как это делается в XAML. Достаточно при описании кнопки добавить атрибут Click, далее VS Intellisense услужливо спросит вас, хотите ли сгенерировать обработчик для события:
Впрочем, вы можете по старинке написать код для обработчика события вручную не в самом XAML, а в файле Home.xaml.cs:
public Home()
{
InitializeComponent();
MyButton.Click += new RoutedEventHandler(MyButton_Click);
}
Но, пока рекомендую использовать XAML-подход, чтобы набить руку и привыкнуть к новой технологии. Когда мы определили функцию MyButton_Click, то можем написать управляемый код в функции. Для первого примера давайте поменяем текст в элементе TextBlock под именем HeaderText (HeaderText является значением атрибута x:Name и мы можем обратиться к нему через это имя). Щелкнем дважды на созданной кнопке, чтобы сразу оказаться в нужном месте кода в редакторе и напишем следующее:
void MyButton_Click(object sender, RoutedEventArgs e)
{
HeaderText.Text = "Hello World!";
}
Если теперь запустить приложение снова, то увидим нашу кнопку. Щелкнув по ней, мы изменим текст:
Следующие шаги
Мы создали первое приложение на Silverlight. В следующей статье мы усложним пример, и напишем более сложный пример с использованием популярного сервиса Twitter.
Идея:
