Шаг 2. Добавляем элементы интерфейса для xaml-страниц

В нашем шаблоне, который мы выбрали для примера, имеются некоторые возможности для навигации (это видно по названию шаблона). В папке Views имеются файлы About.xaml, ErrorWindow.xaml и Home.xaml. Сосредоточимся на файле Home.xaml, который первым выводится на экран при запуске. Откройте файл двойным щелчком и Вы увидите код, который хранится в файле.

Рассматривая XAML-код, можно увидеть, что содержимое страницы содержится в контейнере Grid, например, такие стандартные элементы, как StackPanel и TextBlock. Элемент TextBlock предназначен для вывода текста и является аналогом элемента Label, знакомого Вам по WinForm. Запустите приложение (F5), не внося никаких изменений, чтобы увидеть, что из себя представляет программа. Вы увидите следующее окно:

Рис. л. р. 1.4. Стартовая страницы созданного Silverlight приложения.

Обратите внимание на кнопки-ссылки в верхнем правом углу. Они отвечают за навигацию. Давайте теперь добавим свой код, чтобы понять, как работать с 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 услужливо спросит Вас, хотите ли сгенерировать обработчик для события:

Рис. л. р. 1.5. Intellisense.

Впрочем, Вы можете по старинке написать код для обработчика события вручную не в самом XAML, а в файле Home.xaml.cs:

public Home()

{ InitializeComponent(); MyButton.Click += new RoutedEventHandler(MyButton_Click); }

Когда мы определили функцию MyButton_Click, то можем написать управляемый код в функции. Для первого примера давайте поменяем текст в элементе TextBlock под именем HeaderText (HeaderText является значением атрибута x:Name и мы можем обратиться к нему через это имя). Щелкнем дважды на созданной кнопке, чтобы сразу оказаться в нужном месте кода в редакторе и напишем следующее:

void MyButton_Click(object sender, RoutedEventArgs e) { HeaderText.Text = "Hello World!"; }

Если теперь запустить приложение снова, то увидим нашу кнопку. Щелкнув по ней, мы изменим текст:

Рис. л. р. 1.5. Результат работы функции MyButton_Click

Учебный элемент. Silverlight: размещение элементов.

В первом учебном элементе мы рассмотрели базовые приемы программирования. Теперь разберем вопрос размещения элементов в Silverlight-приложениях. Размещение элементов на форме в Windows Forms было простым занятием. Мы просто перетаскивали нужный элемент с панели инструментов на форму и задавали ему нужные свойства. В приложениях, основанных на XAML, используется другой подход. Важно разобраться с основными принципами размещения элементов в XAML, так как это является основой для дальнейшего успешного программирования на Silverlight (и WPF).