近期公司有桌面客户端的开发需求,并且对样式和界面反馈有一定的要求,对比各种开源UI框架后确认使用MaterialDesign 。
1、引入框架MaterialDesignThemes,注意下对应的版本号,我用的2.6.0的。原因嘛视频教程就是这个版本。
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201190922600-948095371.png)
2、App.xaml中引用样式文件注释下面的可以先不用加,后面会说到具体作用。
<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.LightBlue.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /> </ResourceDictionary.MergedDictionaries> <!--重写框架主体色--> <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#3b76ee" /> <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#3b76ee" /> <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#3b76ee" /> <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#3b76ee" /> <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#3b76ee" /> <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#3b76ee" /> </ResourceDictionary> </Application.Resources>
3、在窗体页面代码中引入 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201191217095-2043222614.png)
4、下载官网demo app,官方下载地址:https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases。注意下载和第一步引入框架的版本一致,打开后界面如下:
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201191526492-509286626.png)
举个栗子,比如你要用某个按钮的样式,打开左侧菜单,选择button,找到想要的按钮,点右下角复制代码:
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201191700549-58373626.png)
这里面东西很多,需要的可以自己慢慢看。
5、说说第3步注释下面的配置吧,由于公司设计给的颜色在框架的主体色中没有,所以我把LightBlue主题的所有颜色重写了。MaterialDesign 有很多的主题色,都在上面这个demo里面。
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201192005321-172475867.png)
这些都是主题名称,并且在第3步的配置文件中可以直接替换Primary后面的文件名称。如果你需要的主题颜色在这里面找不到,那就像我一样把所有的颜色改成你要得颜色。至于为什么知道这么改,下载MaterialDesign 源码后,在MaterialDesignColors.Wpf类库下,打开如图的文件夹,找到对应的主题配置文件,打开后就是我图里这样。没仔细看都是什么意思,直接把9-14行全部复制到自己的项目里面,把颜色改了,最后就像我那个配置文件一样。
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201192404798-2094375100.png)
6、框架控件的属性后台代码赋值方式
MaterialDesignThemes.Wpf.ButtonAssist.SetCornerRadius(waitPaientBtn, new CornerRadius(10, 0, 0, 0));
7、一些效果页面,公司产品有些不得已打码了。
登陆页
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201192720221-542553457.png)
业务界面
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201192839947-1699111018.png)
自己封装的提醒页面
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201193319735-1972326797.png)
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201193406700-895255352.png)
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201193438689-201232013.png)
![](https://img2020.cnblogs.com/blog/1613900/202112/1613900-20211201193510833-2116022964.png)
本文作者:Rolay
本文链接:https://www.cnblogs.com/rolayblog/p/15630417.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
本博客Android APP 下载 |
![]() |
支持我们就给我们点打赏 |
![]() |
支付宝打赏 支付宝扫一扫二维码 |
![]() |
微信打赏 微信扫一扫二维码 |
![]() |
如果想下次快速找到我,记得点下面的关注哦!