MaterialDesignXamlToolkit_materialdesigninxamltoolkit

作者：IT小白 | 2024-02-16 23:34:43

踩

materialdesigninxamltoolkit

MaterialDesignXamlToolkit（Version 4.0.0）

一、Installing the Toolkit

安装MaterialDesignThemes

可以在NuGet中搜索安装：

在这里插入图片描述

官方地址和Demo：GitHub - MaterialDesignInXAML/MaterialDesignInXamlToolkit: Google’s Material Design in XAML & WPF, for C# & VB.Net.

二、Configuring your App.xaml

和任何其他XAML库一样，都需要通过App.xaml导入才能正常使用，首先需要导入控件的所有默认样式，无论选择三种样式中的哪一种，这都是必需的。

<prism:PrismApplication
    x:Class="PrismBlankAppCore.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:PrismBlankAppCore"
    xmlns:prism="http://prismlibrary.com/">
    <Application.Resources>
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
    </Application.Resources>
</prism:PrismApplication>
1
2
3
4
5
6
7
8
9
10

接下来，需要选择一个颜色主题。最简单的选择是使用bunledtheme资源字典提供的内置主题之一。

<prism:PrismApplication
    x:Class="PrismBlankAppCore.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:PrismBlankAppCore"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:prism="http://prismlibrary.com/">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Light"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</prism:PrismApplication>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果喜欢为主题自定义颜色，那么可以使用CustomColorTheme：

<prism:PrismApplication
    x:Class="PrismBlankAppCore.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:PrismBlankAppCore"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:prism="http://prismlibrary.com/">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:CustomColorTheme
                    BaseTheme="Dark"
                    PrimaryColor="Gray"
                    SecondaryColor="Gray" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</prism:PrismApplication>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

三、Configuring your Windows

<Window [...]
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        [...] >
1
2
3
4
5
6
7
8

四、示例

<Window
    x:Class="PrismBlankAppCore.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:prism="http://prismlibrary.com/"
    Title="{Binding Title}"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="{materialDesign:MaterialDesignFont}"
    TextElement.FontSize="14"
    TextElement.FontWeight="Medium"
    TextElement.Foreground="{DynamicResource MaterialDesignBody}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <StackPanel
            Grid.Row="0"
            Margin="10"
            Orientation="Horizontal">
            <Button
                Width="100"
                Height="30"
                Margin="40,0,40,0"
                Command="{Binding NavigationCmd}"
                CommandParameter="ViewA"
                Style="{StaticResource MaterialDesignOutlinedButton}">
                <materialDesign:PackIcon Kind="Connection" />
            </Button>

            <Button
                Width="100"
                Height="30"
                Margin="40,0,40,0"
                Command="{Binding NavigationCmd}"
                CommandParameter="ViewB"
                Style="{StaticResource MaterialDesignFlatButton}">
                <materialDesign:PackIcon Kind="Connection" />
            </Button>

            <Button
                Width="100"
                Height="30"
                Margin="40,0,40,0"
                Command="{Binding OpenDialogCmd}"
                Content="OpenDialog" />
        </StackPanel>

        <StackPanel
            Grid.Row="1"
            Margin="10"
            Orientation="Horizontal">
            <StackPanel Margin="2" Orientation="Horizontal">
                <RadioButton
                    Margin="4"
                    Content="FIRST"
                    IsChecked="True"
                    Style="{StaticResource MaterialDesignTabRadioButton}" />
                <RadioButton
                    Margin="4"
                    Content="SECOND"
                    IsChecked="False"
                    Style="{StaticResource MaterialDesignTabRadioButton}" />
                <RadioButton
                    Margin="4"
                    Content="THIRD"
                    IsChecked="False"
                    IsEnabled="True"
                    Style="{StaticResource MaterialDesignTabRadioButton}" />
            </StackPanel>

            <materialDesign:ColorZone Mode="PrimaryMid">
                <StackPanel Margin="2" Orientation="Vertical">
                    <RadioButton
                        Margin="4"
                        Content="FIRST"
                        IsChecked="True"
                        Style="{StaticResource MaterialDesignTabRadioButton}" />
                    <RadioButton
                        Margin="4"
                        Content="SECOND"
                        IsChecked="False"
                        Style="{StaticResource MaterialDesignTabRadioButton}" />
                    <RadioButton
                        Margin="4"
                        Content="THIRD"
                        IsChecked="False"
                        IsEnabled="False"
                        Style="{StaticResource MaterialDesignTabRadioButton}" />
                </StackPanel>
            </materialDesign:ColorZone>
        </StackPanel>

        <StackPanel
            Grid.Row="2"
            Margin="10"
            Orientation="Horizontal">
            <!--  the following based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons  -->
            <ListBox SelectedIndex="0" Style="{StaticResource MaterialDesignToolToggleListBox}">
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignLeft}" />
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignCenter}" />
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignRight}" />
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignJustify}" />
            </ListBox>

            <ListBox SelectedIndex="0" Style="{StaticResource MaterialDesignToolVerticalToggleListBox}">
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignLeft}" />
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignCenter}" />
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignRight}" />
                <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignJustify}" />
            </ListBox>
        </StackPanel>

        <StackPanel
            Grid.Row="3"
            Margin="10"
            Orientation="Horizontal">
            <ProgressBar
                IsIndeterminate="True"
                Style="{StaticResource MaterialDesignCircularProgressBar}"
                Value="35" />
            <ProgressBar
                Width="200"
                Margin="10"
                IsIndeterminate="True" />
        </StackPanel>

        <StackPanel
            Grid.Row="4"
            Margin="10"
            Orientation="Horizontal">
            <ComboBox
                MinWidth="128"
                materialDesign:ColorZoneAssist.Mode="Inverted"
                materialDesign:HintAssist.HelperText="Select one OS"
                materialDesign:HintAssist.Hint="OS"
                materialDesign:TextFieldAssist.HasClearButton="True"
                materialDesign:TextFieldAssist.SuffixText="sw"
                materialDesign:TextFieldAssist.UnderlineBrush="{DynamicResource SecondaryHueMidBrush}"
                Style="{StaticResource MaterialDesignFloatingHintComboBox}">
                <ComboBoxItem Content="Android" />
                <ComboBoxItem Content="iOS" />
                <ComboBoxItem Content="Linux" />
                <ComboBoxItem Content="Windows" />
            </ComboBox>

            <ComboBox
                Width="256"
                materialDesign:HintAssist.Hint="Validation test"
                materialDesign:TextFieldAssist.HasClearButton="True"
                ItemsSource="{Binding ShortStringList}"
                Style="{StaticResource MaterialDesignOutlinedComboBox}">
                <ComboBox.SelectedItem>
                    <Binding
                        Mode="TwoWay"
                        Path="SelectedValidationOutlined"
                        UpdateSourceTrigger="PropertyChanged" />
                </ComboBox.SelectedItem>
            </ComboBox>
        </StackPanel>
    </Grid>
</Window>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

在这里插入图片描述

            <ToggleButton Width="100">
                <ToggleButton.Style>
                    <Style BasedOn="{StaticResource MaterialDesignOutlinedButton}" TargetType="ToggleButton">
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <materialDesign:PackIcon
                                            Width="auto"
                                            Height="auto"
                                            Kind="LanDisconnect" />
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="{StaticResource MaterialDesignDarkForeground}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <materialDesign:PackIcon
                                            Width="auto"
                                            Height="auto"
                                            Kind="LanConnect" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
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
26
27
28
29

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/97795