Небольшое, но важное введение
В этой статье речь пойдет о том, как можно разрабатывать приложения в Delphi для интерфейса Metro UI. MetroUI — это новый графический интерфейс, который был добавлен в Windows 8 в качестве альтернативы привычному оконному интерфейсу.
Для работы с MetroUI вам понадобиться версия Delphi, включенная в Rad Studio XE3. Загрузить ПО можно на официальном сайте. Разработчики дают 17 дней испытательного срока бесплатно.
Создание нового проекта
Работа в Delphi начинается с создания нового проекта. Для этого вызовите команду главного меню File>New>FireMonkey Metropolis UI Application. Обратите внимание, что именно FireMonkey, а на VCL. Разработка приложений на VCL тоже возможна, однако новые возможности реализованы в этой библиотеке гораздо хуже, чем в FireMonkey. Если Вы ранее еще ни разу не работали с FireMonkey, то это неплохой повод научиться. На практике работать с ней не труднее, чем с VCL.
Первое, чем Вас поприветствует новый проект — это окном для выбора шаблона приложения. Доступны 3 варианта:
- Blank Metropolis UI Application — пустая форма с выпадающей панелью снизу по нажатию Escape. На панели кнопка закрытия формы и еще ряд дополнительных, не работающих кнопок.
- Grid Metropolis UI Application — форма, похожая на начальный экран Windows 8: набор плиток, прокручиваемый по горизонтали. При клике по плитке открывается другая форма с текстом.
- Split Panel Metropolis UI Application — форма, разделенная на панели, каждая со своей прокруткой.

Выберите наиболее подходящую в Вашей ситуации и нажмите OK.
Выбор темы оформления
После создания появиться черная форма с одним единственным, не визуальным компонентом TStyleBook. Этот компонент на подобие Alpha Meneger будет устанавливать для Ваших элементов управления Windows 8 стиль. Давайте попробуем его настроить: для этого сделайте по нему двойной клик. Отобразиться форма, похожая вот на эту:

Слева отображаются все стили, уже загруженные в Ваше приложения. Если попробуете среди них покопаться, то найдете там все возможные Windows 8 кнопки, панели, выпадающие списки и другие элементы. По умолчанию загружена «черная» тема. При желании Вы можете загрузить другие стили. Для этого нажмите кнопку Load… Появиться диалог выбора файла. Вам нужен путь C:\Users\Public\Documents\RAD Studio\10.0\Styles. Здесь 10.0 — это номер Вашей версии. В этой папке находится три темы:
- MetropolisUIBlack.Style
- MetropolisUIBlue.Style
- MetropolisUIDark.Style
- MetropolisUIGreen.Style
Все остальные файлы в папке — это тоже темы, но не для Windows 8. Выбрав подходящие стили нажмите кнопку Apply and Close.
Применение стилей
Теперь попробуем воспользоваться выбранными стилями. Перенесите кнопку TButton на форму. В инспекторе объектов найдите свойство StyleLookup. В нем есть полный перечень доступных стилей оформления кнопки. Часть из них на этом скриншоте:

Подобным же способом Вы можете оформить и другие элементы управления (выпадающие списки, флажки и.т.д.).
AppBar
Выпадающая панелька, включенная во все шаблоны называется AppBar. Ее очень удобно использовать в огромном количестве случаев. Ее можно без проблем использовать и в своем приложении. Если посмотрите в структуру формы, то найдете там компонент ToolBarHolder. Он и отвечает за панель.. Первым делом выберите его и установите свойство Visible в True так, чтобы Вы смогли его редактировать. Панель покажет себя. Далее после редактирования установите Visible обратно в false для нормальной работы элемента.
Панель появляется при нажатии Escape анимировано. Это достигается элементом ToolBarPopupAnimation. Если посмотреть на его свойства можно найти много интересного. Так, например, если установить Interpolation в ItBounce, то панелька будет отскакивать от своего нормального положения, а после возвращаться обратно.
Теперь посмотрим, как создать свою собственную панель. Для этого:
- Поместите компонент TLayout под именем Layout1.
- Задайте его свойство Align в alTop для верхней панели, alLeft для левой или alRight для правой
- Укажите ширину width для левой или правой панелей или высоту height для верхней.
- Разместите компонент TToolBar внутри Layout1.
- Задайте компоненту TToolBar свойства width, height и align аналогично компоненту Layout1.
- Поместите на TToolBar содержимое панели.
- Укажите у TLayout свойcтво Visible в False.
Теперь Вы можете отобразить или скрыть панель просто меняя свойство False у элемента Layout1. Прикрутить анимацию к нашей панели так же не сложно.
Дополнительные элементы
Помимо старых элементов в FireMonkey появилось множество новых Winodws 8 элементов. Вот некоторые из них:
- TExpander — спойлер (выпадающая панель).
- TSwitch — переключатель
Анимация загрузки
Еще одна характерная черта Winodws 8 — это своеобразная анимация загрузки. Ее можно использовать и в Delphi. Для этого:
- Добавьте на форму элемент TAniIndicator.
- Установите его свойство StyleLookup.
- Установите свойство Enabled в true.
Теперь Вы можете запустить приложение и любоваться падающими шариками.
Создание новой формы
Для создания новой формы нужно вызвать команду меню File>New>Other. Выбрать категорию Delphi Projects>Delphi Files и выбрать FireMonkey Metropolis UI Form. Новая форма будет построена по пустому шаблону (только панель). Переключение между формами осуществляется так же, как и в VCL.