Спонсор: Microsoft
Опубликован: 13.12.2011 | Доступ: свободный | Студентов: 981 / 29 | Оценка: 4.29 / 4.57 | Длительность: 13:56:00
Самостоятельная работа 1:

Размещение элементов управления

< Лекция 1 || Самостоятельная работа 1: 123 || Лекция 2 >
Аннотация: В лабораторной работе будут даны задания для самостоятельного выполнения на закрепление пройденной теоретической части лекции 1, а также рассмотрен пример, нацеленный показать пути решения поставленных в лабораторной работе задач.

Цель лабораторной работы: показать способы размещения элементов управления (Canvas, StackPanel, Grid). Рассмотрим каждый из этих элементов, чтобы получить о них более полное представление. Закрепить знания, полученные в "Краткое знакомство с моделью программирования XAML" .

Задания для самостоятельного выполнения

Разместить на экране Grid с двумя колонками и двумя строками. Нижнюю строку объединить и положить в неё StackPanel. В StackPanel разместить несколько элементов управления. Задать им расположение по вертикали, выравнивание по центру.

Учебный элемент. Создание нового проекта для Silverlight в VisualStudio 2010

Silverlight и WPF имеют общие корни и используют одинаковый подход к созданию приложений при помощи XAML. В данном учебном элементе максимально просто и понятно будут рассмотрены основные особенности при программировании на Silverlight. По традиции в качестве примера будет использован стандартный проект "Здравствуй, мир!".

Проект будет разрабатываться на Visual Studio 2010, но в данном случае это не принципиально. Поэтому, если вы еще не перешли на новую версию среды разработки, то можете использовать и VS2008.

Шаг 1. Создание проекта

Запустим Visual Studio и посмотрим, как создавать новые проекты для Silverlight (р. 2.1).

Создание нового проекта Silverlight

Рис. 2.1. Создание нового проекта Silverlight

Если вы раньше выбирали подгруппу Windows для разработки стандартных приложений, то теперь вам нужно выбирать подгруппу Silverlight, в которой находятся несколько типов шаблонов: Silverlight Application, Silverlight Class Library и Silverlight Navigation Application.

Для нашего первого примера возьмем шаблон Silverlight Navigation Application и присвоим своему проекту имя SilverlightHelloWorld.

В следующем окне (р. 2.2) Вам нужно выбрать тип проекта.

Выброр типа проекта Silverlight

Рис. 2.2. Выброр типа проекта Silverlight

Используем настройки по умолчанию, и выбираем ASP.NET Web Application Project. В этом случае Вам будет проще отлаживать код и не придется использовать различные веб-сервисы.

Итак, Вы присвоили имя новому проекту и выбрали его тип. Откроется заготовка для проекта в среде разработки (р. 2.3). Для начала изучим структуру стандартного проекта, которую можно видеть в правой части экрана:

 Структура проекта Silverlight

Рис. 2.3. Структура проекта Silverlight

Вы можете видеть множество различных файлов, которые были созданы без нашего участия. Рассмотрим их.

Итак, наибольший интерес для нас представляют следующие файлы:

  • 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).

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

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

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

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

Рис. 2.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 услужливо спросит Вас, хотите ли сгенерировать обработчик для события:

Intellisense

Рис. 2.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!";
}

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

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

Рис. 2.6. Результат работы функции MyButton_Click
< Лекция 1 || Самостоятельная работа 1: 123 || Лекция 2 >