Форум программистов, компьютерный форум, киберфорум
Hugonavy
Войти
Регистрация
Восстановить пароль
Оценить эту запись

WPF.MaterialDesign - Быстрый старт

Запись от Hugonavy размещена 16.06.2021 в 09:19

MaterialDesign - темы оформления графического интерфейса в стилистике Google и мобильных устройств на базе ОС Android. Дизайн привлекательный, но, к сожалению, весьма скромно распространенный в среде WPF, в связи с чем какой-либо доступной информации по его использованию довольно мало. В этой связи и возникло желание немного расширить отечественную базу знаний на эту тему.

Не по теме:

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



Начало знакомства с библиотекой стоит с презентационного приложения
MaterialDesignInXamlToolkit
, представленного на GitHub. Его можно скачать и, запустив проект MaterialDesignDemo ознакомиться с возможностями библиотеки, элементами и примерами для вставки в свой проект (возле каждого примера есть кнопочка "View XAML" обозначенная символами "</>").

Установка и настройка
Библиотека устанавливается через менеджер пакетов NuGet и состоит из 2 частей: MaterialDesignThemes и MaterialDesignColors.

После установки переходим в App.xaml и в ресурсы (блок Application.Resources) добавляем следующее:
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--Цветовая схема-->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml" />
 
                <!--Компоненты библиотеки-->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DataGrid.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
Здесь стоит обозначить следующее: цветовые схемы разделены на Primary и Accent (кто знаком с разработкой Android приложений, прекрасно это знает). Т.е. есть основной цвет Primary и цвет, для акцентирования внимания на отдельных элементах - Accent. По формированию цветовых схем в интернете много информации, поэтому заострять на этом внимание не вижу смысла.
В примере выше я задал основную палитру цветов Indigo и в качестве акцента LightBlue из стандартных наборов цветовых решений библиотеки (см. MaterialDesignDemo - ColorTool).

Однако цветовую схему можно задать и вручную, делается это следующим образом:
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--Компоненты библиотеки-->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DataGrid.xaml" />
            </ResourceDictionary.MergedDictionaries>
 
            <!--PRIMARY-->
            <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#349fda"/>
            <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#349fda"/>
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#349fda"/>
            <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#349fda"/>
            <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#349fda"/>
            <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#349fda"/>
 
            <!--ACCENT-->
 
            <SolidColorBrush x:Key="SecondaryAccentBrush" Color="#627af0"/>
            <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#627af0"/>
        </ResourceDictionary>
    </Application.Resources>
Собственно, на этом настройку можно считать завершенной.

Для использования библиотеки в окно XAML необходимо добавить на нее ссылку, например вот так
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Window x:Class="TestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestApp"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    
    <StackPanel Orientation="Vertical">
        <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
                     Margin="5"
                     Content="{materialDesign:PackIcon Kind=CalculatorVariantOutline, Size=26}">
        </Button>
    </StackPanel>
</Window>
На этом пока все, в последующих "выпусках" постараюсь описать использование основных элементов при реализации паттерна MVVM.

Спасибо за внимание!
Размещено в Без категории
Показов 523 Комментарии 5
Всего комментариев 5
Комментарии
  1. Старый комментарий
    Аватар для HF
    Не хватает главного - картинок. Я зашёл в тему потому что мне стало интересно - "И каков он этот... MaterialDesign?" но увидел только код. По коду не стал пытаться представлять этот "дизайн" и пошёл дальше.
    Запись от HF размещена 01.07.2021 в 22:10 HF вне форума
  2. Старый комментарий
    HF, возможностей компоновки элементов огромное множество, поэтому выделять что-либо, вставляя изображения, было бы немного некорректно. Примеров также много по поиску изображений "WPF Material Design" в Яндексе или Google. Но, полагаю, с сервисами Google и устройствами на базе Android многие и так знакомы, поэтому оценить сам дизайн можно уже на основе этого опыта))
    Запись от Hugonavy размещена 02.07.2021 в 08:30 Hugonavy вне форума
  3. Старый комментарий
    Аватар для HF
    Цитата:
    Сообщение от Hugonavy Просмотреть комментарий
    HF, возможностей компоновки элементов огромное множество, поэтому выделять что-либо, вставляя изображения, было бы немного некорректно. Примеров также много по поиску изображений "WPF Material Design" в Яндексе или Google. Но, полагаю, с сервисами Google и устройствами на базе Android многие и так знакомы, поэтому оценить сам дизайн можно уже на основе этого опыта))
    Если так, то в том же гугле "Get started" полно. И наверняка даже хотя бы с одним-двумя скриншотами. В чём тогда ценность вашей статьи перед остальными?
    Запись от HF размещена 02.07.2021 в 08:55 HF вне форума
  4. Старый комментарий
    HF, когда я начинал это все изучать, на русском языке я практически ничего не нашел. Да и на форуме периодически всплывают вопросы на эту тему. Эту мысль я озвучил в одной из тем в ветке по WPF, на что получил ответ модератора, что это неплохая идея Вот и начал писать. Я не блогер и не писатель, поэтому могут быть огрехи в подаче информации. Описал так, как мне самому было бы понятно.

    P.S.: В принципе, можно вообще ничего не писать, сами разработчики, как показала практика, весьма оперативно отвечают на вопросы (на GitHub). Но не каждый будет заморачиваться
    Запись от Hugonavy размещена 02.07.2021 в 09:07 Hugonavy вне форума
  5. Старый комментарий
    Аватар для HF
    Цитата:
    Сообщение от Hugonavy Просмотреть комментарий
    Да и на форуме периодически всплывают вопросы на эту тему. Эту мысль я озвучил в одной из тем в ветке по WPF, на что получил ответ модератора, что это неплохая идея Вот и начал писать. Я не блогер и не писатель, поэтому могут быть огрехи в подаче информации.
    Дак и я вам не как критик пишу. Я такой же читатель. Мне была интересна тема, но то чего мне не хватило для более интересного чтения - я вам и озвучил. Вам уже делать выводы - хотите вы сделать статью интереснее или нет. Но пока - она ничем не отличается от простого ответа в гугле.
    Запись от HF размещена 02.07.2021 в 09:15 HF вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.