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

导读

最开始接触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

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页