Mahapps metro как пользоваться
Обновлено: 05.07.2024
This guide will introduce you to how MahApps.Metro works and how to incorporate it into your app.
Русские Блоги
What's Next?
For extended documentation, take a look at the Styles and Controls section.
Русские Блоги
Extend the MetroWindow
The MetroWindow can be extend and changed with some extra features.
The visibility of the TitleBar can be changed with the property ShowTitleBar
Use the LeftWindowCommands and RightWindowCommands to add controls to the title bar. Button, ToggleButton, SplitButton and DropDownButton will use a default style. For all other controls you must create your own styles.
The WindowButtonCommands are also changable, so you can create your own Min, Max/Restore and Close button styles.
The visibility of the Min and Max / Restore buttons are also effected by the ResizeMode . If ResizeMode="NoResize" the buttons are collapsed. If ResizeMode="CanMinimize" the Max / Restore button is collapsed.
Show a resize grip on the right bottom corner for better resizing.
Note
Make sure to include the MahApps.Metro.IconPacks to get the cupcake icon.
You can also show an Icon on the title bar by setting the Icon property or by using the IconTemplate property.
Добиться эффекта
На самом деле, ниже приведена лишь простая настройка формы и помещены некоторые простые кнопки, это пример программы из этой статьи, на самом деле существует множество забавных стилей, включая анимационные эффекты.
Реализовать трилогию в стиле Metro
1. Сначала добавьте ресурсы в App.xaml
После введения почти все наши элементы управления имеют стиль Metro.
2. Измените окно на стиль Metro
Сделайте следующую ссылку на xmlns в теле XAML.
- xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Затем замените метку окна следующей меткой
Взгляните на полный код XAML моей формы. Я добавил три элемента управления в качестве примеров, как показано ниже.
3. Последний шаг - изменить наследование в виде кода cs.
- // цитата
- using MahApps.Metro.Controls;
- namespace MetroWPF
- /// <summary>
- /// Интерактивная логика MainWindow.xaml
- /// </summary>
- public partial class MainWindow : MetroWindow
- public MainWindow()
- InitializeComponent();
- >
- >
- >
Пока наш пример завершен, давайте посмотрим на официальный пример формы! На самом деле, это очень простые настройки, очень простые в использовании.
Что такое MetroWindow и на что он способен
mahapps.metro - это проект, начатый Полом Дженкинсом в 2011 году. Это простой способ внедрить пользовательский интерфейс в стиле метро в приложения WPF.
на главной странице GitHub определяется следующим образом:
A toolkit for creating metro-style WPF applications. Lots of goodness out-of-the box.
Набор инструментов, используемых для создания приложений WPF в стиле Metro.
кратко описывает его функции следующим образом:
- 1. Предоставляет стиль формы с верхней командной кнопкой
- 2. Предоставляется ряд элементов управления в стиле Metro, в частности:
Кнопка "Кнопки"
Меню ContextMenu
Таблица данных DataGrid
Окно подсказки диалоговых окон (лично мне это не нравится)
FlipView (прокручивающаяся диаграмма, аналогичная прокручиваемой рекламе приложения)
Всплывающие окна (всплывающие кнопки и области)
NumericUpDown (поле значения с кнопкой ±)
ProgressBar (индикатор выполнения)
ProgressRing (индикатор выполнения)
RangeSlider (ползунок перетаскивания для дополнительной области, я думаю, это хорошая работа, можно использовать для определения диапазона)
Ползунок
SplitButton и DropDownButton (кнопка вниз)
TabControl (вкладка)
TextBox (текстовое поле)
Плитка (плитка)
ToggleButton (выбираемая кнопка)
ToggleSwitch (переключатель, аналогично мобильному приложению)
TransitioningContentControl (контейнер перехода, будет вынесен отдельно позже)
Элементы управления со значком (отмеченный элемент управления, аналогично подсказке значения красной точки значка на телефоне)
С помощью приведенных выше элементов управления вы можете создать легкое и красивое приложение с интерфейсом WPF.
фокусируется на «TransitioningContentControl»:
TransitioningContentControl - это контейнер изменений. Он имеет ключевой атрибут Content, который используется для установки элемента управления содержимым. Если есть две кнопки button1 и button2, при изменении содержимого внутри с button1 на button2 , Будет запущена анимация переключения, и направление анимации может быть установлено с помощью ".Transition" = "TransitionType.Up" и т. Д. Всего перечислено 9 анимаций, которые можно временно изменить.
Кроме того, в библиотеке управления есть некоторые значки, iconPacks: PackIconMaterial, которые можно использовать ежедневно.
Как использовать MetroWindow
Шаг 2: Запишите параметры конфигурации в App.xaml:
где application в pack: // application:, / представляет собой название приложения, это содержимое также можно определить самостоятельно, вам необходимо загрузить исходный код, затем настроить содержимое и настроить файл Расположение указывает на настраиваемый файл, например, вы можете настроить размер шрифта по умолчанию для кнопки.
Шаг 4. Измените базовый класс формы на «MetroWindow» и добавьте ссылку на «using MahApps.Metro.Controls»
Установите MahApps.Metro
Для установки по-прежнему рекомендуется использовать NuGet, как показано на рисунке ниже.
Затем найдите MahApps.Metro в NuGet, а затем установите его, как показано ниже.
После установки это было завершено в нашей справке.
MahApps build-in styles and themes
All resources of MahApp.Metro are located within separate resource dictionaries. To adopt the MahApps.Metro theme, you will need to add the resource dictionaries to your App.xaml .
Note
Make sure that all resource file names are Case Sensitive!
Installation
You can install MahApps.Metro via the NuGet UI or with the Package Manager Console.
With the Package Manager Console:
If you want to use a pre-release packages of MahApps.Metro , you need to enable Include Prerelease in the NuGet UI:
With the Package Manager Console:
Рекомендация библиотеки управления пользовательским интерфейсом в плоском стиле wpf tutorial-metro: MahApps.Metro
Хотя эффект пользовательского интерфейса, производимый wpf, уже очень хорош, многие требования клиентов все еще улучшаются. После выхода Win8 многим пользователям понравился стиль Metro.
Сегодня я рекомендую библиотеку управления пользовательским интерфейсом в стиле Metro: MahApps.Metro.
SplitButton and DropDownButton
Здесь нет скриншотов. Все идут прямо на официальный сайт.
Установка и использование шагов:
Через NuGet GUI (щелкните правой кнопкой мыши на своем проекте, выберите Управление пакетами NuGet, выберите онлайн и найдите MahApps.Metro) или консоль диспетчера пакетов:
PM> Install-Package MahApps.Metro
Если вы хотите использовать предварительный пакет MahApps, вам необходимо включить графический интерфейс включения предварительного просмотра:
Или используйте консоль менеджера пакетов:
pm> Install-PackageMahApps.Metro -Pre
Существует два способа использования окон в стиле MahApps.Metro:
Вы можете использовать в комплекте MetroWindow Контроль или,
Создай свое собственное окно
Теперь мы будем использовать MetroWindow Потому что этот метод будет хорошей пропорцией приложений, и работа - самый быстрый и простой метод. Если вы хотите знать свое окно, проверьтеРуководство。
Управление с MetroWindow
Изменить файл XAML
После установки MahApps.Metro:
Добавьте этот атрибут в тег открытого окна. (Вот как вы ссылаетесь на другие пространства имен в XAML):
изменение <Window . тег <controls:MetroWindow . (Не забудьте изменить ярлык закрытия!)
Вам все еще нужно изменить MainWindow.xaml.cs Базовый класс файла MainWindow согласование MetroWindow Класс файла XAML. доступ MetroWindow Сначала добавьте следующую ссылку.
using MahApps.Metro.Controls public partial class MainWindow : MetroWindow
Но в большинстве случаев вы можете поставить базовый класс (потому что это partial XAML класса должен позаботиться):
public partial class MainWindow
Окончательный результат будет таким:
Используйте встроенные стили
Все ресурсы MahApp.metro включены в отдельный словарь ресурсов. Для того, чтобы большинство элементов управления использовали MahApps. Метро тема, вам нужно будет добавить следующие ResourceDictionaries для вас App.xaml
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application. /MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application. /MahApps.Metro;component/Styles/Fonts.xaml" /> <ResourceDictionary Source="pack://application. /MahApps.Metro;component/Styles/Colors.xaml" /> <ResourceDictionary Source="pack://application. /MahApps.Metro;component/Styles/Accents/Blue.xaml" /> <ResourceDictionary Source="pack://application. /MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
Конечный результат выглядит следующим образом. Если вы хотите узнать больше о том, как работает контроль, вы можете найти более подробную информацию ниже.
Что такое MetroWindow?
Значение по умолчанию MetroWindow Состоит из нескольких частей:
Если вам не нравятся теги элементов, не бойтесь, все они необязательны.
титулбар установлен MetroWindow За исключением вашего. ShowTitleBar="true|false"
Не контроль размера, только способ настройки MetroWindow -Все углы можно понять, но с учетом MetroWindow Там нет очевидного окна "хром", как окно авиации, и настройка элементов управления может помочь успокоить пользователя.
Вместо использования статического изображения, сверните, разверните / закройте значок шрифта Marlett. Объясните, почему это так необходимо, чтобы вернуться к памяти или хотя бы посетитьСтатья в википедииОб этом
Вы даже можете скрыть настройки значка в строке заголовка ShowIconOnTitleBar="true|false"
Настроить
WindowCommands Свернуть, развернуть / восстановить и закрыть кнопки. Вы можете добавить свой собственный контроль WindowsCommands -По умолчанию стили кнопок автоматически применяются к остальным, поэтому они адаптируются WindowsCommands , С 0,9, вы больше не ограничены кнопками, но любой контроль. Обратите внимание, что вы несете ответственность за стиль кнопок.
Включая это MetroWindow Метки:
<Controls:MetroWindow.RightWindowCommands> <Controls:WindowCommands> <Button Content="settings" /> <Button> <StackPanel Orientation="Horizontal"> <Rectangle Width="20" Height="20" Fill=", Path=Foreground>"> <Rectangle.OpacityMask> <VisualBrush Stretch="Fill" Visual="" /> </Rectangle.OpacityMask> </Rectangle> <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="deploy cupcakes" /> </StackPanel> </Button> </Controls:WindowCommands> </Controls:MetroWindow.RightWindowCommands>
Производит это окно заголовка:
Цвет передней (ссылка) WindowCommands Он всегда будет белым, если заголовок заголовка не отключен, и в этом случае это будет любая тема, которую вы решите поменять. Например, используя тему «белый / свет», цвет переднего плана - черный.
также LeftWindowCommands Ориентирует команду слева от заголовка.
Если вы хотите использовать стиль Metro в WPF, вы можете нарисовать его самостоятельно.
Но чтобы сэкономить время, ха, сегодня я рекомендую всем стороннюю библиотеку управления стилями Metro.
Эта статья играет роль только в привлечении кирпича и нефрита. Если вам интересно, я рекомендую вам перейти на официальный сайт, спасибо, и официальный адрес сайта.
ссылка
Baidu Translator переводит напрямую, а именно:
О
Metro - это проект, начатый Полом Дженкинсом в 2011 году. Это простой способ внедрить пользовательский интерфейс в стиле Metro в приложения WPF. С тех пор он продолжал развиваться и получал вклад от разных людей в сообществе (наконец, существует более 600 форков).
Это проект сообщества, завершенный сообществом - никто из нас не будет за него платить, мы делаем это из любви к коду.
Итак, если вам нравится этот проект и вы хотите, чтобы он был лучше, примите участие!
Метро не панацея
Microsoft продемонстрировала две стороны Metro: если все сделано хорошо, это выглядит совершенно шокирующим; если не сделано хорошо, это выглядит абсолютно печально. Не каждое приложение может быть хорошо преобразовано в интерфейс Metro. Если вы разрабатываете сложный инструмент, такой как Visual Studio, лучше избегать использования стилей пользовательского интерфейса, основанных на обширной типографике.
Конечно, всегда будут исключения, но то, что Metro выглядит простым, не означает, что дизайн несложный. Чем сложнее приложение, тем больше времени (обычно) уходит на дизайн.
mahapps.metro
This guide will introduce you to how MahApps.Metro works and how to incorporate it into your app.
Installation
You can install MahApps.Metro via the NuGet GUI (right click on your project, click Manage NuGet Packages, select Online and search for MahApps.Metro) or with the Package Manager Console:
If you want to use the pre-release packages of MahApps.Metro (these have the latest code and newest features), you need to enable Include Prerelease in the GUI:
or use the Package Manager Console:
Styling the Window
There’s two ways you can style your Window using MahApps.Metro:
- You can use the included MetroWindow control or,
- Design your own window
For now we’ll use MetroWindow , as this approach will work for a good percentage of apps and is the quickest and easiest way to get going. If you want to learn about rolling your own window, check out the guide.
Using the MetroWindow Control
Modifying the XAML file
After installing MahApps.Metro:
- open up MainWindow.xaml
- add this attribute inside the opening Window tag. (It’s how you reference other namespaces in XAML):
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
or
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls" - change <Window . tag to <Controls:MetroWindow . (remember to change the closing tag too!)
You should have something like this (don’t copy and paste this):
Modifying the CodeBehind File
You’ll also need to modify the MainWindow.xaml.cs file so that the base class for MainWindow matches the MetroWindow class of the XAML file.
But in most cases you can just drop the base class (because this is a partial class the XAML should take care of this):
The end result will look something like this:
Using Built-In Styles
All of MahApp.Metro’s resources are contained within separate resource dictionaries. In order for most of the controls to adopt the MahApps.Metro theme, you will need to add the ResourceDictionaries to your App.xaml .
App.xaml (v2.0.0 and newer)
App.xaml (v1.6.5 and older)
Make sure that all file names are Case Sensitive!
The end result will look something like this. If you want to know more about how the control works, more information can be found below.
What’s a MetroWindow?
The default MetroWindow is made up of a few components:
If you don’t like the elements that are labelled, fear not, they’re all optional.
- The titlebar is what sets MetroWindow apart from rolling your own. ShowTitleBar="True|False"
- The resize grip is not the only way to resize a MetroWindow - all edges and corners can be gripped, but given a MetroWindow doesn’t have a noticeable window “chrome” like an aero window, the resize grip can help reassure users.
- Instead of using static images, the icons for minimize/maximize/close are a font called Marlett. To explain why this is so requires a walk down memory lane, or at least a visit to the Wikipedia article about it.
- You can even hide the icons on the title bar by setting the ShowIconOnTitleBar="True|False"
Customization
WindowButtonCommands
WindowButtonCommands are the minimize, maximize/restore, and close buttons. You can hide the buttons with ShowMinButton="True|False" , ShowMaxRestoreButton="True|False" and ShowCloseButton="True|False" .
The visibility of the minimize and maximize/restore buttons are also effected by the ResizeMode . If ResizeMode="NoResize" the buttons are collapsed. If ResizeMode="CanMinimize" the maximize/restore button is collapsed.
(Left-/Right-) WindowCommands
You can add your own controls to LeftWindowsCommands or RightWindowsCommands - by default, buttons have a style automatically applied to them to make them fit in with the rest of the WindowsCommands . As of 0.9, you are no longer limited to just buttons, but any control. Be aware, you’re responsible for styling anything other than buttons.
Including this within the <MetroWindow> . </MetroWindow> tag:
Produces this window titlebar:
The foreground (link) colour of (Left-/Right-) WindowCommands will always be white, unless the titlebar is disabled, in which case it will be the reverse of whatever theme you have selected. For example, using the White/Light theme, the foreground colour will be black.
Using the MetroWindow
To start with the full MahApps styling and full window support you need to change your normal Window to our MetroWindow.
- Open up your main window, normally named MainWindow.xaml
- Add the namespace attribute inside the opening Window tag or
- Change the <Window . </Window> tag to <mah:MetroWindow . </mah:MetroWindow>
Now you should have something like this (don't copy and paste this directly)
You'll also need to modify the code behind of the window file so that the base class matches the MetroWindow class of the XAML file.
But in most cases you can just drop the base class (because this is a partial class the XAML should take care of this).
The end result will look something like this:
Читайте также: