MaterialDesignXamlToolkit

最新推荐文章于 2024-05-19 10:05:53 发布
最新推荐文章于 2024-05-19 10:05:53 发布
阅读量2k 收藏 1
点赞数 2
分类专栏： WPF 文章标签： wpf materialdesign
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhudaokuan/article/details/114642607
版权

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>

接下来，需要选择一个颜色主题。最简单的选择是使用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>

如果喜欢为主题自定义颜色，那么可以使用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>

三、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}"
        [...] >

四、示例

<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>

在这里插入图片描述

            <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>

在这里插入图片描述

heater404
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用MaterialDesignInXamlToolkit打造优雅的WPF应用
gitblog_00017的博客
03-19 1404
使用MaterialDesignInXamlToolkit打造优雅的WPF应用 项目地址:https://gitcode.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit 在软件设计领域，Material Design以其简洁、直观且具有深度的视觉语言赢得了广泛的赞誉。而MaterialDesignInXamlToolkit正是将这一设计理念...
WPF控件库MaterialDesignInXamlToolkit
qq_44050457的博客
09-13 1467
WPF控件库MaterialDesignInXamlToolkit的使用
探索与重塑：Material.Avalonia —— AvaloniaUI 的 Material Design 实现
最新发布
gitblog_00099的博客
05-19 629
探索与重塑：Material.Avalonia —— AvaloniaUI 的 Material Design 实现 项目地址:https://gitcode.com/AvaloniaCommunity/Material.Avalonia [Material.Avalonia][Nuget.Material.Avalonia] 是一个专为 [AvaloniaUI][AvaloniaUI] 框架设计...
WPF MaterialDesignInXamlToolkit框架 上手
Deokoo的专栏
03-16 2165
1. 添加 NuGet 包 　　在解决方案管理器视图中的目标项目上右键 -> 管理 NuGet 程序包； 添加 MaterialDesignThemes 包，如下图所示： 2.配置App.xml 在App.xml文件中，引入控件命名空间，引入资源字典 更改此处来更改主题和颜色 BaseTheme="Light" PrimaryColor="Aqua" SecondaryColor="DarkGreen" 3.配置主窗口文件 <Window [...] Text
基于Material Design风格开源、易用、强大的WPF UI控件库
dotNET跨平台
04-09 170
前言今天大姚给大家分享一款基于Material Design风格开源、免费（MIT License）、易于使用、强大的WPF UI控件库：MaterialDesignInXamlToolkit。项目介绍MaterialDesignInXamlToolkit 是一个开源、易于使用、强大的 WPF UI 控件库，旨在帮助开发人员在 C# 和 VB.Net 中实现 Google 的 Material D...
WPF Material Design UI框架：部分常用控件简单使用
qq_44695769的博客
10-23 3871
Material Design in xaml 是开源免费的ui框架，工控软件主打的就是简单界面。以下简称MD。
WPF学习日记56
NLP工程化
02-21 408
1.System.Windows.Readability 解析：指定的可读性值LocalizabilityAttribute为二进制XAML(BAML)类或类成员。 2.System.Windows.LocalizabilityAttribute.Readability 解析：获取或设置本地化属性的目标值的可读性设置。 3.System.Windows.LocalizabilityAttribute.LocalizabilityAttribute(LocalizationCategory category)
WPF开源界面库MaterialDesignInXamlToolkit
kingkaa的博客
11-07 967
C#WPF的开源界面库MaterialDesign，源码编译简单，样例丰富，界面美观
[WPF]项目整合Metro和MaterialDesignInXamlToolkit UI框架
weixin_30420305的博客
01-29 1583
项目地址 MapApps：Metro MaterialDesignInXamlToolkit:MaterialDesignInXamlToolkit MapApps官网：官网链接 官方整合文档 官方提供的两个框架共存的方式：点击链接 实例 1、打开Nuget包管理 2、搜索Metro，点击项目，选择一个版本安装 3、...
wpf使用MaterialDesign
weixin_44554554的博客
10-18 1779
下载materialDesign 在文件中引用头文件 xmal文件中 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" app.xmal中 <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries>
material-design-toolkit:Material Design 的一些构建块的实现
06-10
材料设计工具包 欢迎来到 Material Design Toolkit 项目。 这是 Material Design 的一些构建块的实现。 用法 要求 阴影绘制将需要RenderScript ，因此，应将这两行添加到您的项目build.gradle文件中： android { .. . defaultConfig { .. . renderscriptTargetApi 22 renderscriptSupportMode true } } 添加 Material Design Toolkit 库的依赖项。 dependencies { compile ' org.lab99:material-design-toolkit:0.1 ' } 调色板 Material Design Toolkit 库包括
MaterialDesignInXamlToolkit
06-02
github上下载的，WPF控件，开源，可以去那上面搜搜，很容易找到的
DialogBoxForMaterialDesignInXamlToolkit:这是承载MaterialDesign DialogBox源代码的存储库，其行为类似于WinForms中的MessageBox。-Source material
03-24
DialogBoxForMaterialDesignInXamlToolkit 这是用于托管MaterialDesign DialogBox源代码的存储库，该源代码的行为类似于WinForms中的MessageBox。 因此，就像使用MessageBox一样使用它！ 先决条件 使用此库之前，必须先MaterialDesignInXamlToolkit。 如何安装？ 您可以通过Nuget软件包管理器控制台安装此软件包： Install-Package DialogBoxForMaterialDesignToolkitInXaml -Version 1.0.0 如何使用 ？ 仅显示一个按钮： DialogBox . Show ( " ERROR 404 " , " Unable to connect to the website. " , " RETRY " ); 显示两个按钮： D
WPF MaterialDesignInXamlToolkit-master 源码
01-08
WPF MaterialDesignInXamlToolkit-master 完整源码, 亲自经过测试
materialdesign动画示例
08-28
materialdesign动画示例
MaterialDesignToolkit样式使用备忘录_程序版本问题
wu_pan123的博客
07-18 514
在引用MaterialDesignToolkit样式时，若程序版本为x64，则在使用样式的时候会报错“无法解析**文件”，样式无法在设计时加载，但编译后控件会加载样式；若程序版本为x86或anyCPU，则不会出现上述问题。 ...
WPF 使用MaterialDesign(开源UI控件库)
lvxingzhe3的博客
06-07 3876
WPF 使用MaterialDesign开源UI控件库(基于.NET6,Prism框架)
关于MaterialDesignInXamlToolkit编译不通过问题解决方法
xb1667的专栏
06-13 377
从github上下载的工程项目，直接用vs2022打开，生成解决方案失败，若.Net SDK版本与globle.json中指定的版本不一致的话，直接删除工程目录下的globle.json文件，再清理下解决方案，重新生成即可。
materialdesigninxaml教程
03-17
materialdesigninxaml教程是一种教授使用WPF和XAML技术来实现Material Design设计风格的教程。Material Design是一种由Google推出的设计语言，旨在提供一种简洁、直观、有层次感的设计风格，让用户能够更加轻松地使用应用程序。materialdesigninxaml教程提供了一系列的教学视频和文档，帮助开发者了解如何使用WPF和XAML技术来实现Material Design设计风格，从而提高应用程序的用户体验和美观度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值