Как установить, настроить и использовать MetroFramework (Styled Interface Components) в вашем приложении C # WinForms

На сегодняшний день не так много решений для создания динамических пользовательских интерфейсов в настольном приложении для Windows с использованием таких инструментов, как WinForms. Наиболее известный способ сделать это — реализовать CefSharp, чтобы иметь возможность разрабатывать интерфейс с использованием HTML, CSS и JavaScript. Однако не каждый может просто добавить более 50 МБ к размеру проекта реализация CefSharp для использования пользовательских элементов управления HTML в своих проектах. Для тех, кто все еще хочет реализовать пользовательские элементы управления и сделать их выглядящими лучше, чем они есть по умолчанию, есть отличное решение, позволяющее не значительно увеличить размер вашего проекта и использовать пользовательские элементы управления.

Мы говорим о MetroFramework, эта структура пользовательского интерфейса переносит современный пользовательский интерфейс Metro UI Windows 8 в любое приложение .NET Windows Forms. Эта структура добавляет компоненты в стиле Metro, такие как:

  • кнопка
  • Поле со списком
  • флажок
  • Переключатель
  • тумблер
  • этикетка
  • Ссылка на сайт
  • панель
  • Полоса прокрутки
  • Metrotile
  • Индикатор
  • ProgressSpinner
  • TabControl
  • TrackBar
  • Пользовательский контроль пользователя
  • Контекстное меню
  • Окно сообщения
  • DateTimePicker
  • сетка

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

1. Установите фреймворк через NuGet

Предпочтительный способ установки — через NuGet. Установите пакет с помощью Visual Studio, открыв диспетчер пакетов NuGET. Делать щелкните правой кнопкой мыши ваш проект в обозревателе решений в правой верхней части Visual Studio и выберите Управление пакетами NuGet в выпадающем меню:

Пакеты Nuget обозревателя решений

В появившемся окне перейдите на вкладку Обзор и найдите metromodernuiвыберите пакет в списке и установите его в свой проект:

Установка пакета MetroModernUI NuGet

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

2. Создайте новую вкладку для элементов управления Metro на панели инструментов

С MetroFramework вы сможете перетаскивать элементы управления в ваши формы так же, как и с традиционными элементами управления. Чтобы быть организованным, мы рекомендуем вам создать пользовательскую вкладку панели инструментов для хранения внутри эксклюзивных элементов управления MetroFramework. Сделайте правый клик на пустом месте панели инструментов и в выпадающем меню выберите Добавить вкладку, это позволит вам создать пустую вкладку и дать собственное имя, в этом случае мы назовем его Metro Controls:

Панель управления WinForms Metro

Затем щелкните правой кнопкой мыши на созданной вами вкладке (элементы управления Metro) и выберите Выберите товары из меню:

Выбор элементов пользовательского набора инструментов Visual Studio

В новом окне перейдите на вкладку «Компоненты .NET Framework» и нажмите «Обзор»:

WinForms MetroFramework Выбор компонентов

Когда появится средство просмотра файлов, вам нужно будет перейти к папке вашего проекта WinForms, затем в папке пакетов найдите папку MetroModernUI, затем в lib и, наконец, в сети. Внутри сетевой папки должно быть 3 DLL-файла. выберите только MetroFramework.dll файл и нажмите на открыть.

MetroFramework UI Controls

Затем появится панель загрузки и элементы управления появятся в списке компонентов .NET, наконец, нажмите OK:

Элементы управления пользовательским интерфейсом MetroFrameworks

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

Компоненты пользовательской панели инструментов Windows MetroControls

И вы сможете просто перетаскивать нужные элементы управления в форме так же, как вы используете стандартные компоненты Windows.

3. Добавьте ссылки на элементы управления и шрифты Metro.

На предыдущем шаге вы можете перетаскивать компоненты и работать с ними в своем проекте, однако, если вы решите развернуть проект на другом компьютере, он не будет работать, поскольку этих компонентов там не существует. Поэтому вам нужно добавить ссылку на DLL-файлы MetroFramework в вашем проекте, чтобы иметь возможность использовать их везде.

Перейдите в обозреватель решений в верхней правой части Visual Studio, щелкните правой кнопкой мыши свой проект, затем в меню «Добавить» и затем «Ссылка»:

Добавить ссылку на ваш проект

В появившемся окне найдите вкладку «Обзор» и нажмите кнопку «Обзор». Еще раз, как мы делали ранее в Шаге 2, найдите сетевую папку внутри папки MetroModern в пакетах и ​​выберите 3 dll-файла:

Библиотеки DLL MetroModern

Нажмите «Добавить», а затем в окне «Диспетчер ссылок» выберите «ОК». Затем в ссылках вашего проекта должны появиться 3 ссылки на файлы DLL:

MetroModernUI DLL Ссылки

Теперь вы можете делать все, что вы хотите с этим каркасом!

4. Использование фреймворка

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

using MetroFramework.Forms;
using MetroFramework;

Например, вы можете добавить кнопку с визуальным компоновщиком в форму, затем дважды щелкнуть по ней, и событие click будет добавлено автоматически так же, как это происходит со стандартными элементами управления. Теперь в событии щелчка вы можете отобразить Metro Box, используя:

MetroMessageBox.Show(this, "Your message here.", "Title Here", MessageBoxButtons.OKCancel, MessageBoxIcon.Hand);

И это отобразит окно сообщения в стиле metro:

Metro Alert MetroFramework

Для получения дополнительной информации рекомендуем ознакомиться с документацией в официальном блоге автора библиотеки или проверить официальный репозиторий на Github здесь.

Ссылка на основную публикацию
Adblock
detector