Дизайн страницы на Silverlight

Мы можем завершить страницу программы Сумматор, перетаскивая нужные элементы на экран и устанавливая их свойства. Первым делом после перетаскивания элемента на страницу рекомендуется определить имя этого элемента. Признаком плохого стиля программы является страница, содержащая много элементов с именами типа Button1, Button2 и т.д.

Разработка страницы является несложной задачей, которая сводится к перетаскиванию элементов на страницу и настройке свойств каждого элемента. Средства Silverlight позволяют добавить к элементам графические свойства, которые могут сделать их прозрачными, добавить изображения к их фону и даже сделать их анимированными.

Язык XAML

Проектирование дизайна на Silverlight состоит из манипуляций с элементами с помощью дизайнера Visual Studio и присваивания значений нужным свойствам элементов. Выполняя эти действия, можно создать любой пользовательский интерфейс. интерфейс приложения на Silverlight описывается с помощью языка XAML.

XAML означает "расширяемый язык разметки приложений" (eXtensible Application Markup Language). Silverlight использует XAML для описания внешнего вида страницы.

XAML определяет четкую границу между внешним видом приложения (свойства отображаемых элементов) и поведением приложения (какие действия выполняют элементы приложения).

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

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

Содержимое файла XAML. Файл XAML для страницы содержит конструкции, которые описывают все элементы на странице. Каждое описание содержать набор свойств. Строка XAML, которая описывает элемент TextBox, может выглядеть так:

Если сравнить информацию в области свойств со значениями атрибутов в коде XAML, можно установить их соответствие: имя элемента TextBox — firstNumberTextBox, ширина — 460 и т.д. Страница и область свойств синхронизируют значения, так как они используют один и тот же XAML-файл страницы. При перемещении элементов по странице редактор обновляет XAML; область свойств считывает данные из этого файла и обновляет его значения.

XAML является декларативным языком. Он создан, чтобы быть понятным для людей, поэтому у всех выше указанных свойств понятные имена. Можно отредактировать текст XAML-файла в Visual Studio для изменения внешнего вида страницы в дизайнере и значений свойств. Непосредственное редактирование кода на языке XAML для опытных программистов часто происходит намного быстрее, чем перетаскивание элементов по экрану и редактирование в окне свойств. Это особенно полезно, если нужно добавить большое количество однотипных элементов. Для облегчения редактирования XAML-кода Visual Studio предоставляет поддержку Intellisense.

При компиляции программы XAML-файл преобразуется в файл, содержащий низкоуровневые инструкции, которые создают необходимые элементы для работы программы. Объявление элементов страницы в файле XAML означает, что управление ими будет осуществляться через объекты, которые может использовать программа.

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

Языки, основанные на XML (eXtensible Markup Language — расширяемый язык разметки), являются расширяемыми в том смысле, что мы можем придумать новые слова и фразы, которые подчиняются правилам языка, и использовать эти новые конструкции для описания того, что нам нужно. Их называют языками разметки, потому что они часто используются для описания расположения элементов на странице. Слово "разметка" первоначально использовалось при печати. Практически самым известным языком разметки является HTML — язык разметки гипертекста (HyperText Markup Language), который используется во всемирной паутине для описания формата веб-страниц.

Программисты часто создают свои собственные форматы хранения данных, используя XML. В качестве примера рассмотрим фрагмент XML-файла, в котором представлен список рекордов:

<?xml version="1.0" encoding="us-ascii"?><HighScoreRecords count="2"> <HighScore game="Breakout"> <playername>Rob Miles</playername> <score>1500</score> </HighScore> <HighScore game="Space Invaders"> <playername>Rob Miles</playername> <score>4500</score> </HighScore></HighScoreRecords>

В этом файле элемент HighScoreRecords содержит два элемента HighScore: один для игры Breakout и один для игры Space Invaders. Оба элемента HighScore содержатся внутри элемента HighScoreRecords. У каждого элементов есть атрибут, который определяет название игры, и два вложенных элемента: имя игрока playername и количество набранных очков score. Этот текст довольно легко понять.

В самой первой строке файла указана версия стандарта XML и используемая кодировка символов. XAML использует правила расширяемого языка разметки, чтобы создать язык, который описывает компоненты на странице экрана.

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

XML-схема. Стандарт XML также содержит описания, как создать схему, которая описывает особый формат документа. Например, в схеме для информации о рекордах можно указать, что элемент HighScore должен содержать элемент PlayerName, атрибут Score и необязательный атрибут Date, в котором может храниться информация о дате установленного рекорда.

Система стандарта формата и схемы означает, что разработчики могут легко создавать форматы данных для конкретных целей. Этому способствует факт, что существует много инструментальных средств, которых помогают создавать документы и схемы. Среда.NET даже предоставляет программам возможность сохранения объектов в виде отформатированных XML-документов. Даже файл решения Visual Studio хранится как XML-документ.

Язык XAML на страницах приложений. В XAML-файле можно описать целую страницу экрана Windows Phone. При создании нового проекта Windows Phone автоматически создается новая страница с несколькими элементами. При добавлении на страницу элементов увеличивается и размер файла, поскольку для каждого элемента создается его описание. Некоторые элементы являются контейнерами — они могут содержать другие компоненты, например, элемент Grid может содержать набор других элементов и располагать их в виде сетки. XAML-код также может включать описания анимации и преобразований, которые можно применять к элементам на странице для создания усовершенствованных пользовательских интерфейсов.

При этом, в XAML не существует понятия наследования: нельзя создать элемент XAML, который наследуется от другого. Элементы Silverlight представляются в виде объектов, которые являются частью иерархии классов, но когда они записаны в файле XAML, они все представляются элементами, которые находятся на одном уровне иерархии.

С помощью XAML можно создать довольно сложный дизайн для программ. Также существует специальный инструмент Expression Blend для графических дизайнеров, который содержит расширенные средства для создания графических интерфейсов.