Дизайн WPF прирожения в стиле Metro

1

Mahapps Metro

Любая вещь должна быть не только удобной в пользовании, но и иметь привлекательный внешний вид. В мире программного обеспечения только самому интерфейсу уделяется очень большое внимание, пожалуй нет человека в IT, который не слышал о UI/UX. Но стандартные компоненты, как правило, ориентированы на функциональность и имеют самый примитивный внешний вид. Так и с компонентами в WPF. WPF содержит в себе механизмы кастомизации этих компонентов с помощью стилей и шаблонов. Но делать это самому довольно долго, хотя позволяет создать компонент любого внешнего вида, и вписать в любой дизайн.

В этой статье я покажу как создать довольно неплохой дизайн, а именно Metro, в WPF приложении. Мы не будем писать все сами, ведь есть замечательное готовое решение — Mahapps.Metro. Mahapps.Metro — это библиотека готовых стилей для всех стандартных компонентов WPF, но этим ее функциональность не ограничивается. В библиотеке также содержатся другие полезные компоненты, которых, к сожалению, нет среди стандартных компонентов WPF. Также она поддерживает возможность изменения цветовой гаммы для всего проекта и создание собственных цветных гамм.

2

Итак, начинаем

Создаем новый проект, или открываем уже существующий, который мы хотим стилизовать.

Далее нужно установить саму библиотеку, делается это через Manage NuGet Packages (правой кнопкой мыши щелкаем на проекте в Solution Explorer, далее выбираем Manage NuGet Packages, затем открываем вкладку Online и в поле поиска пишем Mahapps.Metro. Среди результатов поиска появится наша библиотека, последний шаг — нажимаем Install).

Для установки можно воспользоваться также и Package Manager Console в ней необходимо просто написать:

PM> Install-Package MahApps.Metro

3

Стилизация окна

Есть два способа стилизации окна приложения:

  • Вы можете использовать встроенный компонент MetroWindow, или же…
  • Разработать свое собственное окно

Но сейчас мы просто используем встроенный компонент MetroWindow, так как он прекрасно справляются со своими задачами и использование его значительно проще и быстрее.

4

Компонент MetroWindow

После установки MahApps.Metro:

Откройте MainWindow.xaml

Добавьте этот атрибут внутрь открывающего тега Windows

xmlns: Controls = "clr-namespace: MahApps.Metro.Controls; assembly = MahApps.Metro"

Замените тег <Window … на <Controls: MetroWindow …

У вас должно получиться что-то типа этого (но не копируйте этот код в ваше приложение, так как может возникнуть конфликт пространств имен, лучше делайте все сами, следуя инструкции и сверяясь с кодом ниже):

5

Модификация кода логики окна

Вам необходимо редактировать файл MainWindow.xaml.cs так как в фрагменте ниже:

Но в большинстве случаев достаточно просто удалить базовый класс для MainWindow

В результате, при запуске приложение вы должны получить что-то типа этого:

6

Использование встроенных стилей

Чтобы все стили были применены для вашего приложения, необходимо в файл App.xaml в секцию ResourceDictionaries добавить код ссылок на файлы стилей. Должно получиться что-то типа этого:

В результате наше окно будет выглядеть примерно так.

Если хотите больше узнать о Mahapps.Metro, переходите на их официальный сайт, в разделе документации можно найти детальное описание работы с этой библиотекой. Если есть вопросы оставляйте их в комментариях.

Похожие публикации

Комментарии