MaterialDesignInXAML WPF入门教程快速入门

最新推荐文章于 2024-05-14 16:57:07 发布

fafuwxm

最新推荐文章于 2024-05-14 16:57:07 发布

阅读量5.7k

点赞数 1

分类专栏： WPF 文章标签： wpf c# microsoft

本文链接：https://blog.csdn.net/qq_38942623/article/details/126257382

版权

WPF 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

MaterialDesignInXAML WPF 小白教程快速入门

前言

先去MaterialDesignInXAML下载下来源码，以及Releases，在DemoApp 中就可以看到实际的效果很惊艳了。

在这里插入图片描述

除了要有一定的C#、winform 基础外，建议先学习一下 XAML，对整个开发环境有个基础的了解，再来学习此教程。

可以去bilibili上免费学习一下。教程一共12个小时，如果不看后面的实战的内容，简单了解下XAML的工作原理，也是可以直接继续下面的教程的。

1.建立项目

这里的开发环境使用的是 Visual Studio 2019
在这里插入图片描述
选择创建新项目

选择 WPF 应用程序。
在这里插入图片描述
根据需要设置项目名称以及保存位置
创建项目之后，先按F5运行一下，看一下默认的界面。

管理NuGet 程序包。

搜索 MaterialDesignThemes 进行下载安装。

编辑 App.xaml 内容，默认生成的是：

<Application x:Class="Material01.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Material01"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

我们需要引入所需要的 materialDesign 相关的资源，修改为

<Application x:Class="Material01.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Material01"
             StartupUri="MainWindow.xaml"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml 默认生成的是

<Window x:Class="Material01.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:Material01"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

设置应用程序的样式，以及加入一个StackPanel 以及卡片，

<Window x:Class="Material01.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:Material01"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">
    <Grid>
        <StackPanel>
            <materialDesign:Card Padding="32" Margin="16">
                <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">My First Material Design App</TextBlock>
            </materialDesign:Card>
        </StackPanel>
    </Grid>
</Window>

然后按下F5，运行一下，效果就出来了。
在这里插入图片描述
是的，就是这么简单，你已经可以上手编写程序了。