Работа с XAML

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

В этой статье Абхишека Шуклы, автора книги “Blend для Visual Studio 2012 на примере руководства для начинающих”, мы рассмотрели различные элементы управления компоновкой и то, как использовать их в нашем приложении. В этой статье мы рассмотрим следующие темы:

• Основы XAML
• Использование XAML для приложений в Blend

(Дополнительные ресурсы, связанные с этой темой, см. здесь).

Важно отметить, что почти все, что мы можем сделать с помощью XAML, можно сделать и с помощью C#. Ниже приведен код XAML и C# для выполнения одной и той же задачи – добавления прямоугольника в холст. В коде XAML создается холст и экземпляр прямоугольника, который помещается внутрь холста:

• Код XAML : В следующем коде мы объявляем элемент Rectangle внутри Canvas , и это делает элемент Rectangle дочерним элементом Canvas . Иерархия элементов определяет отношения между родителями и детьми элементов. Когда мы объявляем элемент в XAML, это то же самое, что инициализировать его конструктором по умолчанию, а когда мы устанавливаем атрибут в XAML, это эквивалентно установке того же свойства или обработчика события в коде. В следующем коде мы устанавливаем различные свойства прямоугольника, такие как высота, ширина и так далее:
• Код C# : Мы создали Canvas и Rectangle. Затем мы установили несколько свойств элемента Rectangle и поместили Rectangle внутрь Canvas:

Мы можем ясно видеть, почему XAML является предпочтительным выбором для определения элементов пользовательского интерфейса – код XAML короче, более читабелен и обладает всеми преимуществами, которые предоставляет декларативный язык. Еще одним важным преимуществом работы с XAML, а не с C#, является мгновенная обратная связь при проектировании. Набирая код XAML, мы мгновенно видим изменения на художественной доске. В то время как в случае с C# нам нужно запустить приложение, чтобы увидеть изменения. Благодаря XAML процесс создания пользовательского интерфейса теперь больше похож на визуальный дизайн, чем на разработку кода.

Когда мы перетаскиваем элемент или рисуем его на художественной доске, Blend генерирует XAML в фоновом режиме. Это удобно, поскольку нам не нужно вручную кодировать XAML, как при работе с инструментами редактирования текста.

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

Где бы мы ни создавали пользовательский интерфейс, мы должны использовать XAML, а все, что связано с данными, должно обрабатываться в коде. XAML отлично подходит для пользовательского интерфейса, в котором может присутствовать логика, но XAML не предназначен для обработки данных, которые должны быть подготовлены в коде и размещены в пользовательском интерфейсе для отображения. Именно для обработки данных XAML не предназначен.

Основы XAML

Каждый элемент в XAML сопоставляется с экземпляром класса .NET, и имя элемента в точности соответствует имени класса. Например, элемент в XAML – это инструкция по созданию экземпляра класса Button. Спецификации XAML определяют правила сопоставления пространств имен, типов, событий и свойств объектно-ориентированных языков с пространствами имен XML.

Время действовать – взгляд на код XAML

Выполните следующие действия и посмотрите на пространства имен XAML после создания приложения WPF:

1. Создадим новый WPF-проект в Expression Blend и назовем его Chapter03 .
2. В Blend откроем MainWindow.xaml , и щелкнем на опции split-view, чтобы мы могли видеть как вид дизайна, так и вид XAML. Это показано на следующем снимке экрана:

• В предыдущем коде мы видим, что XAML-файл имеет корневой элемент. Чтобы XAML-документ был корректным, в нем должен быть один и только один корневой элемент. Обычно в качестве корневого элемента используется окно, страница или элемент управления пользователя. Другие используемые корневые элементы – ResourceDictionary для словарей и Application для определения приложения.
• Элемент Window также содержит несколько атрибутов, включая имя класса и два пространства имен XML. Три свойства ( Title , Height и Width ) определяют надпись окна и размер окна по умолчанию. Имя класса, как вы уже догадались, определяет имя класса окна. Адрес

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

Что только что произошло?

Мы рассмотрели пространства имен XAML, которые мы используем при создании WPF-приложения.

Время действовать – добавление других пространств имен в XAML

В этом разделе мы добавим еще одно пространство имен, помимо пространства имен по умолчанию:

Мы можем использовать любое другое пространство имен в XAML. Для этого нам необходимо объявить пространства имен XML, схемы которых мы хотим придерживаться. Синтаксис для этого следующий:

Prefix – это XML-префикс, который мы хотим использовать в XAML для представления данного пространства имен. Например, пространство имен XAML использует префикс .

Namespace – полное квалифицированное пространство имен .NET.

AssemblyName – это сборка, в которой объявлен тип, причем эта сборка может быть текущей сборкой проекта или ссылающейся сборкой.

Что только что произошло?

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

Именование элементов

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

Мы можем установить свойство name вручную в XAML или задать его в окне свойств. Это показано на следующем снимке экрана:

Код-behind класса

Атрибут x:Class в XAML ссылается на класс code-behind для XAML. Вы можете заметить символ x: , что означает, что атрибут Class происходит из пространства имен XAML, как обсуждалось ранее. Значение атрибута ссылается на класс MainWindow в пространстве имен Chapter03. Если мы перейдем к файлу MainWindow.xaml.cs, то увидим, что там определен частичный класс. Класс code-behind – это место, где мы можем разместить код C# (или VB) для реализации обработчиков событий и другой логики приложения. Как мы обсуждали ранее, технически возможно создать все элементы XAML в коде, но это лишает нас преимуществ XAML.

Поэтому, поскольку эти два класса являются частичными, они скомпилированы в один класс. Так как C# и XAML эквивалентны и оба эти класса являются частичными классами, они компилируются в один IL.

Время действовать – использование именованного элемента в классе code-behind

1. Перейдите в MainWindow.xaml.cs и измените фон сетки LayoutRoot на Green :
2. Запустите приложение; вы увидите, что цвет фона сетки стал зеленым.

Что только что произошло?

Мы обратились к элементу, определенному в XAML по его имени.

Свойства по умолчанию

Содержимое элемента XAML – это значение, которое мы можем просто поместить между тегами без каких-либо конкретных ссылок. Например, мы можем задать содержимое кнопки следующим образом:

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

Выражение свойств в виде атрибутов

Мы можем выразить свойства элемента в виде атрибута XML.

Время действовать – добавление элементов в XAML с помощью ручного кодирования

В этом разделе вместо перетаскивания элементов управления мы будем добавлять код XAML:

Переместите MainWindow.xaml в XAML и добавьте код, показанный здесь, чтобы добавить TextBlock и три кнопки в Grid :

• Content : Это содержимое, отображаемое на экране. Это свойство имеет тип Object.
• Высота : Это высота кнопки. Это свойство имеет тип Double.
• Ширина : Это ширина кнопки. Это свойство имеет тип Double.
• Margin : Это объем пространства за пределами элемента управления, то есть между краем элемента управления и его контейнером. Это свойство имеет тип Thickness.
• Text : Это текст, отображаемый на экране. Это свойство имеет тип String.
• FontSize : Это размер шрифта текста. Это свойство имеет тип Double.

Что только что произошло?

Мы добавили элементы в XAML со свойствами в виде атрибутов XML.

Синтаксис без атрибутов

Мы определим градиентный фон для сетки, который является сложным свойством. Обратите внимание, что код в следующем разделе устанавливает свойство background сетки, используя на этот раз другой преобразователь типов. Вместо конвертера типа string-to-brush будет использован конвертер типа LinearGradientBrush to brush.

Время действовать – определение градиента для сетки

1. Добавьте следующий код внутрь сетки.
2. Мы задали две остановки градиента. Первый – черный, а второй – оттенок зеленого.
3. Мы указали начальную точку LinearGradientBrush как левый верхний угол, а конечную точку – как правый нижний угол, поэтому мы увидим диагональный градиент:

Ниже приведен результат предыдущего кода:

Комментарии в XAML

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

Стили в XAML

Мы хотели бы, чтобы все кнопки в нашем приложении выглядели одинаково, и мы можем добиться этого с помощью стилей. Здесь мы рассмотрим, как можно определять и использовать стили в XAML.

Определение стиля

Мы определим стиль как статический ресурс в окне. Мы сможем перенести все свойства, которые мы определим для каждой кнопки, в этот стиль.

Время действовать – определение стиля в XAML

Добавьте новый тег в XAML, а затем добавьте код для стиля, как показано здесь:

Мы определили несколько свойств стиля, на которые стоит обратить внимание:

• TargetType : Это свойство определяет тип элемента, к которому мы будем применять этот стиль. В нашем случае это Button.
• x:Key : Это уникальный ключ для ссылки на стиль в окне.
• Setter : Элементы setter содержат имя и значение свойства.

Что только что произошло

Мы определили стиль для кнопки в окне.

Использование стиля

Давайте воспользуемся стилем, который мы определили в предыдущем разделе. Все элементы управления пользовательского интерфейса имеют свойство style (из базового класса FrameworkElement).

Время действовать – определение стиля в XAML

1. Чтобы использовать стиль, мы должны установить свойство style элемента, как показано в следующем коде. Добавьте такой же код стиля для всех кнопок:
   • Мы задаем свойство стиля с помощью фигурных скобок ( <> ), потому что мы используем другой элемент.
   • StaticResource означает, что мы используем другой ресурс.
   • MyButtonStyle – это ключ для ссылки на стиль. Следующий код инкапсулирует свойства стиля:

Ниже приведен результат предыдущего кода:

Что только что произошло?

Мы использовали стиль, определенный для кнопки.

Куда двигаться дальше

В этой статье был дан краткий обзор XAML, который поможет вам начать проектирование приложений в Expression Blend. Однако, если вы хотите узнать больше о XAML, вы можете посетить следующие ссылки MSDN и ознакомиться с различными спецификациями и деталями XAML:

• XAML в Silverlight:
• XAML в WPF:

Контрольная работа

Q1. Как узнать свойство по умолчанию элемента управления?

Q2. Можно ли создать пользовательский конвертер типов?

Резюме

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