WPF MaterialDesign 开源免费UI组件的介绍和简单使用

2024-02-22 13:55:28

导读

最开始接触WPF是2017年11月份，相比当时自己也不大熟悉Winform，觉得WPF做的效果很好。但由于一些原因，公司也没有采用WPF进行项目开发。后来一直都是自己看看MSDN、《WPF编程宝典》、bilibili以及万能的百度等，自己也学到了很多。后来在2018年1月份，自己主张使用WPF开发了一个物联网设备监控系统，虽然遇到很多问题，但是最后的效果我觉得能甩Winform很远...自此，开始了漫长的WPF学习之旅。

最开始应该是今年年初在Bilibili上的一次视频学习中，看到了Material Design，当时没多大在意。就在昨天，我在给新项目找一些框架资源时。发现很多人都对这个免费开源的UI组件赞不绝口，于是就去GitHub下了APPDemo和源码，当时的效果就把我惊艳到了。这个必须学...

资源链接分享

官网地址（里面有很多资料）：http://materialdesigninxaml.net/

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

DemoApp地址：https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases

介绍

Material Design是一款简单好用的WPF样式和控件库，其详细介绍请参考官网http://materialdesigninxaml.net/。

使用

1.创建项目

.NetFramework版本最好要在4.5以上

2.使用NuGet添加Material Design资源

Tips:项目右键->管理NuGet程序包

3.配置资源

（1）在找到APP.xaml文件并打开，并将资源配置到程序中

<Application x:Class="Deamon.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Deamon"
             StartupUri="MainWindow.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.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

（2）在需要使用控件的窗体、页面（我这里时MainWindow.xaml）等文件中引入控件集名字空间

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

<Window x:Class="Deamon.MainWindow"
        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:local="clr-namespace:Deamon"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="Deamon Learning Material Design In Xaml"
        >
    <Grid>
    </Grid>
</Window>

4.使用控件

打开从GitHub上下载的DemoApp，找到MaterialDesignDemo.exe文件，并运行。

通过右上角的菜单，找到需要的控件

是不是很熟悉的文本，直接复制到我们的项目文件中使用。

<Window x:Class="Deamon.MainWindow"
        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:local="clr-namespace:Deamon"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="Deamon Learning Material Design In Xaml"
        >

    <Grid>
        <ToggleButton Content="H"
                      Style="{StaticResource MaterialDesignActionToggleButton}"
                      ToolTip="MaterialDesignActionToggleButton"
                      materialDesign:ShadowAssist.ShadowDepth="Depth3" />
    </Grid>
</Window>

后面是我自己随便复制了几个控件，效果果然不错。

Tips:

在使用的过程中，如果遇到一些常见错误：例如某个“不知名”的域名（domain1），这是Material Design的一些名字空间，文本后面一般会标记是来自哪里的，你也可以通过源码找到原作者是怎么实现的。多看源码，不仅仅可以解决一般错误，也许你还会发现，原来你也可能会做一些之前你觉得不可思议的东西:）

总结

Material Design是一个很好用的WPF样式库和控件集，对于稍微有点WPF基础的开发者非常友好。简单好用是我的第一感：直接使用NuGet就可以获取到资源包，通过其官方的DemoApp(MaterialDesignDemo)很容易使用控件和样式，上手贼快。对于喜欢钻研的同学来说，他具备完善的资料：GitHub源码和实例，也可以使用DemoApp中的对应控件的“</>”和“{}”跳转到对应控件的源码，通过学习研究创作出更多的好看、好用的样式和控件。

源码地址：https://download.csdn.net/download/youyomei/11583243

Over

每次记录一小步...点点滴滴人生路...

码农公寓

导读