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

764 阅读5分钟

前言

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 项目。

1、安装工具包

通过 Visual Studio 的 NuGet 包管理器安装工具包,或使用以下命令:

Install-Package MaterialDesignThemes

2、修改 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" />

                <!-- 引用 Material Design 2 的默认样式 -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" /> 
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

如果希望使用 Material Design 3,请将上述代码片段中的 ResourceDictionary 行修改为引用 MaterialDesign3.Defaults.xaml:

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />

3、修改 MainWindow.xaml

在 MainWindow.xaml 中应用 Material Design 样式:

<Button Style="{StaticResource MaterialDesignFlatButton}" Content="Click Me!" />

项目效果

1、首页卡片布局

页面采用卡片式布局,能直观展示数据。

2、支持主题风格切换

该控件库提供多种颜色主题,满足不同场景下的配色需求。

用户可以根据需要轻松切换浅色、深色或自定义主题,确保应用程序在任何环境下都能保持一致且美观的外观。

3、按钮

交互式按钮是界面开发中不可或缺的一部分。

该控件库提供了丰富的按钮样式,如圆形按钮、图标按钮、带进度条的按钮和带有文字提示的按钮等,能够轻松实现类似 Web 的交互效果。

4、输入验证框

表单验证通常在 ViewModel 中编写业务逻辑代码或在 XAML 中使用验证表达式。

该控件库内置了多种验证器,简化了代码实现,并提供了友好的界面提示,类似于移动端的输入和错误提示,提升了用户体验。

5、标签(Chips)

标签(Chips)用于标记和过滤数据。当列表显示的数据较多时,标签可以帮助用户快速筛选和定位所需信息,增强了交互性和便捷性。

6、卡片(Cards)

卡片式布局为数据展示带来了新的活力。

相比传统的列表和表格,卡片形式更加直观和清爽,适合以图片+文字的方式呈现内容,让用户一目了然地获取信息,提升整体体验。

7、图标包(Icon Pack)

该控件库包含成百上千种矢量图标,极大地丰富了开发选项。

图标可用于菜单、按钮等多种场景,方便快捷地美化界面。

8、分组框(Group Boxes)

分组框(Group Boxes)允许对相关内容进行分组,增强界面的组织性和可读性。

其自定义 Header 功能使得添加图片和其他元素变得非常容易,进一步提升设计灵活性。

9、进度条

各式各样的进度条设计,解决了传统进度条调整复杂的难题。

该控件库提供的几种样式几乎覆盖了一般需求,若需进一步定制也十分简单,极大地方便了开发者。

10、对话框

遮罩式对话框不仅酷炫,还提供全窗体遮罩和局部用户控件对话框两种选择。

11、抽屉(Drawer)

抽屉式控件支持从东、南、西、北四个方向打开,增加了界面的动态感和交互性。

无论是侧边栏还是底部工具栏,抽屉控件都能提供美观的解决方案。

12、简单提示

最后但同样重要的是,简单提示信息功能。

这种方式避免了频繁弹框打扰用户,通过即时自动关闭的提示信息,用户只需一眼即可获取必要的反馈,既简洁又高效。

项目地址

GitHub:github.com/MaterialDes…

官网:materialdesigninxaml.net/

总结

以上仅展示了MaterialDesignInXamlToolkit控件的部分功能。更多实用特性和详细信息,请大家访问项目地址。

希望通过本文能为WPF UI 开发提供有价值的参考。欢迎在评论区留言交流,分享您的宝贵经验和建议。

最后

如果你觉得这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助,欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区,与其他热爱技术的同行一起交流心得,共同成长!

优秀是一种习惯,欢迎大家留言学习!