勿忘初心做自己 发表于 2024-12-31 12:16:35

开源 Material Design WPF UI 控件库,易用且功能强大

前言

Material Design 是由 Google 开辟的一套设计指南,提供统一的设计语言,使用户界面更加直观、美观和一致。
Material Design In XAML Toolkit 是一个用于在WPF 程序开辟中实现 Material Design 设计语言的开源界面控件库。
项目介绍

MaterialDesignInXamlToolkit 是一个实用于 Windows 桌面的开源 WPF UI 控件库,帮助大家在 C# 和 VB.NET 中轻松实现 Google 的 Material Design 风格用户界面。
该框架提供一组丰富且功能强大的控件、样式和效果,支持全面的 UI 组件,并允许自界说主题颜色、字体等。通过使用 MaterialDesignInXamlToolkit,可以快速开辟现代化、美观且用户友好的应用程序。
焦点组件

除了包罗标准的控件主题外,该套件还包罗了一些常用的控件:时钟、对话框、浮动按钮、卡片、齐全图标等。
项目特点


[*]实用于 Windows 桌面(WPF)的全面且易用的 Material Design 主题和控件库
[*]主要 WPF 框架控件的 Material Design 样式 支持主题的附加控件,包罗多动作按钮、卡片、对话框和时钟
[*]轻松配置调色板(设计时和运行时均可配置)
[*]完整的 Material Design Icons 图标包
[*]平滑的过渡效果
[*]与 Dragablz 和 MahApps 兼容
[*]源项目中包罗演示程序
项目使用

使用 Microsoft Visual Studio 2022创建一个 WPF 项目。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226180838889-1719306266.png
1、安装工具包

通过 Visual Studio 的 NuGet 包管理器安装工具包,或使用以下下令:
Install-Package MaterialDesignThemes2、修改 App.xaml

添加以下代码到 App.xaml文件中:
<Application
x:Class="Example.App"
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"
StartupUri="MainWindow.xaml">
    <Application.Resources>
      <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
               
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />

               
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>
    </Application.Resources>
</Application>假如希望使用 Material Design 3,请将上述代码片段中的 ResourceDictionary 行修改为引用 MaterialDesign3.Defaults.xaml:
3、修改 MainWindow.xaml

在 MainWindow.xaml 中应用 Material Design 样式:
项目效果

1、首页卡片布局

页面采用卡片式布局,能直观展示数据。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226180744537-1846327202.png
2、支持主题风格切换

该控件库提供多种颜色主题,满足不同场景下的配色需求。
用户可以根据需要轻松切换浅色、深色或自界说主题,确保应用程序在任何环境下都能保持一致且美观的外观。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226182103300-1982912978.png
3、按钮

交互式按钮是界面开辟中不可或缺的一部分。
该控件库提供了丰富的按钮样式,如圆形按钮、图标按钮、带进度条的按钮和带有文字提示的按钮等,能够轻松实现类似 Web 的交互效果。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181406940-94761899.png
4、输入验证框

表单验证通常在 ViewModel 中编写业务逻辑代码或在 XAML 中使用验证表达式。
该控件库内置了多种验证器,简化了代码实现,并提供了友好的界面提示,类似于移动端的输入和错误提示,提升了用户体验。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181858561-1072899390.png
5、标签(Chips)

标签(Chips)用于标志和过滤数据。当列表显示的数据较多时,标签可以帮助用户快速筛选和定位所需信息,加强了交互性和便捷性。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181617499-1767308562.png
6、卡片(Cards)

卡片式布局为数据展示带来了新的活力。
相比传统的列表和表格,卡片情势更加直观和清新,适合以图片+文字的方式出现内容,让用户一览无余地获取信息,提升整体体验。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181527036-2033143451.png
7、图标包(Icon Pack)

该控件库包罗成百上千种矢量图标,极大地丰富了开辟选项。
图标可用于菜单、按钮等多种场景,方便快捷地美化界面。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181722266-1902870935.png
8、分组框(Group Boxes)

分组框(Group Boxes)允许对相干内容举行分组,加强界面的组织性和可读性。
其自界说 Header 功能使得添加图片和其他元素变得非常轻易,进一步提升设计机动性。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226183430971-1314569075.png
9、进度条

各式各样的进度条设计,解决了传统进度条调整复杂的难题。
该控件库提供的几种样式几乎覆盖了一般需求,若需进一步定制也十分简单,极大地方便了开辟者。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181757705-969086440.png
10、对话框

遮罩式对话框不仅酷炫,还提供全窗体遮罩和局部用户控件对话框两种选择。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226181940596-128599391.png
11、抽屉(Drawer)

抽屉式控件支持从东、南、西、北四个方向打开,增加了界面的动态感和交互性。
无论是侧边栏还是底部工具栏,抽屉控件都能提供美观的解决方案。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226184233319-1273926764.png
12、简单提示

最后但同样重要的是,简单提示信息功能。
这种方式制止了频繁弹框打扰用户,通过即时主动关闭的提示信息,用户只需一眼即可获取必要的反馈,既简洁又高效。
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226183958136-310171070.png
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226183644517-483734712.png
https://img2024.cnblogs.com/blog/576536/202412/576536-20241226184508439-1868806560.png
项目地址

GitHub:https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit
官网:http://materialdesigninxaml.net/
总结

以上仅展示了MaterialDesignInXamlToolkit控件的部分功能。更多实用特性和详细信息,请大家访问项目地址。
希望通过本文能为WPF UI 开辟提供有价值的参考。欢迎在评论区留言交流,分享您的宝贵经验和建议。
最后

假如你以为这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。假如有任何疑问或需要进一步的帮助,欢迎随时留言。
也可以加入微信公众号 社区,与其他热爱技术的同行一起交流心得,共同成长!良好是一种风俗,欢迎大家留言学习!
https://img2024.cnblogs.com/blog/576536/202408/576536-20240814113403514-910171896.png

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 开源 Material Design WPF UI 控件库,易用且功能强大