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

Краткая аннотация лабораторной работы: в лабораторной работе будут даны задания для самостоятельного выполнения на закрепление пройденной теоретической части лекции 1, а так же рассмотрен пример, нацеленный показать пути решения поставленных в лабораторной работе задач.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. л. р. 1.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).