当前位置:   article > 正文

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

wpf materialdesign

前言

没有前言

在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的方法
在这里插入图片描述

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

  1. 编辑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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这里插入图片描述

  1. 在窗体的XAML文件(如MainWindow.xaml)中进行引用
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
  • 1

在这里插入图片描述

四、开始使用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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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

后记

没有后记

本文知识简单的介绍了MaterialDesign了使用方法,具体的还需要大家自己在实战中进行学习,同时多看官方文档,或者多去百度。

原创文章,转载请注明出处。希望这篇文章对你有帮助。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/97827
推荐阅读
相关标签
  

闽ICP备14008679号