Wpf UI框架 MaterialDesign 的使用记录

近期公司有桌面客户端的开发需求，并且对样式和界面反馈有一定的要求，对比各种开源UI框架后确认使用MaterialDesign 。

1、引入框架MaterialDesignThemes，注意下对应的版本号，我用的2.6.0的。原因嘛视频教程就是这个版本。

 

 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" 

 

 4、下载官网demo app，官方下载地址：https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases。注意下载和第一步引入框架的版本一致，打开后界面如下：

 

 

举个栗子，比如你要用某个按钮的样式，打开左侧菜单，选择button,找到想要的按钮，点右下角复制代码：

 

 这里面东西很多，需要的可以自己慢慢看。

5、说说第3步注释下面的配置吧，由于公司设计给的颜色在框架的主体色中没有，所以我把LightBlue主题的所有颜色重写了。MaterialDesign 有很多的主题色，都在上面这个demo里面。

 

这些都是主题名称，并且在第3步的配置文件中可以直接替换Primary后面的文件名称。如果你需要的主题颜色在这里面找不到，那就像我一样把所有的颜色改成你要得颜色。至于为什么知道这么改，下载MaterialDesign 源码后，在MaterialDesignColors.Wpf类库下，打开如图的文件夹，找到对应的主题配置文件，打开后就是我图里这样。没仔细看都是什么意思，直接把9-14行全部复制到自己的项目里面，把颜色改了，最后就像我那个配置文件一样。

 

6、框架控件的属性后台代码赋值方式

 

MaterialDesignThemes.Wpf.ButtonAssist.SetCornerRadius(waitPaientBtn, new CornerRadius(10, 0, 0, 0));

 

7、一些效果页面，公司产品有些不得已打码了。

登陆页

 

 业务界面

 

 自己封装的提醒页面