WPF使用MaterialDesign -- 好看的控件先从button开始

阿杆.

已于 2022-07-21 14:42:32 修改

阅读量7.8k

点赞数 7

分类专栏：学习笔记文章标签： wpf microsoft c# 开发语言 xaml

于 2021-12-09 17:30:44 首次发布

本文链接：https://blog.csdn.net/little_stick_i/article/details/121831168

版权

学习笔记专栏收录该内容

28 篇文章 4 订阅

订阅专栏

文章目录

前言
正文
后记

前言

~~没有前言~~

在WPF控件效果这一块，很显然比winfrom要好很多，但想要做出真正好看的控件，我个人觉得还是需要用一些已有的东西比较好，比如MaterialDesign，控件种类多，自带很多图标，上手比较容易，还囊括了多个平台，所以MaterialDesign算是一个比较好的选择。

正文

一、下载MaterialDesign

GitHub地址：https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

下载到本地进行编译，或者直接从远程拉取再编译，都是一样的，可以参考视频https://www.bilibili.com/video/BV1KZ4y1u7fV/

编译完之后到项目文件里找到编译生成的exe文件，我的路径是D:\VS2019\MaterialDesignInXamlToolkit-3.1.3\MainDemo.Wpf\bin\Debug\net472\MaterialDesignDemo.exe，最好是给它在桌面上建立一个快捷方式，在需要用的时候开它来看看里面提供的样式的代码，然后关掉这个项目就行。注意，编译完之后不要清理解决方案，否则这个exe文件也会被清理掉。

因为有很多小伙伴说编译不成功，所以这里我也附一份我编译成功的压缩包，需要的小伙伴可以自取。
虽然我上传到csdn了，但是我没有设置积分，可以直接免费下载的。
https://download.csdn.net/download/little_stick_i/85097716

打开之后是这样的

二、下载NuGet包

刚刚项目已经被我们关掉了，现在转到自己的项目，在NuGet管理中，搜索MaterialDesignThemes，安装第一个即可。
在这里插入图片描述

三、引用MaterialDesign

可参考：官方文档（英文版的），内有如何在XAML中引用MaterialDesign的方法
在这里插入图片描述

也可以参考我下面的内容：

编辑App.xaml
主要是要把<Application.Resources>中间那一块复制进去，前后的内容按照你原来的样子就可以了

<?xml version="1.0" encoding="UTF-8"?>
<Application . . .>
  <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.DeepPurple.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

在这里插入图片描述

在窗体的XAML文件（如MainWindow.xaml）中进行引用

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

在这里插入图片描述

四、开始使用MaterialDesign

MaterialDesign中提供了很多控件样式，还记得刚刚生成的那个exe文件吗？到那里去找到自己想要的控件的样子，然后将代码复制到自己的XAML文件中即可。

比如我想使用下图这个button
在这里插入图片描述
我先把代码复制下来，然后放到我的XAML文件中，如下：

<Window x:Class="RobotAPP.View.AboutWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:local="clr-namespace:RobotAPP.View"
        mc:Ignorable="d"
        Title="关于" Height="250" Width="400"
		ResizeMode="CanMinimize"  BorderThickness="0.3" 
		WindowStartupLocation="CenterScreen">
    <Grid>
		<Button
            Style="{StaticResource MaterialDesignRaisedLightButton}"
            Width="100"
            ToolTip="Resource name: MaterialDesignRaisedLightButton">
			_LIGHT
		</Button>

	</Grid>
</Window>

效果：
在这里插入图片描述
其他控件的使用方法也差不多都是这样，根据自己的喜好去选择就好啦。