WPF教程一：创建Hello world来理解XAML的内容及编译

最新推荐文章于 2024-09-29 14:41:05 发布

杜文龙.

最新推荐文章于 2024-09-29 14:41:05 发布

阅读量765

点赞数

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

本文链接：https://blog.csdn.net/input0715/article/details/114988301

版权

wpf 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

　在实际的WPF开发中遇到很多再用Winform写法来写WPF的开发人员，很多时候项目进度延期、出现非必要的BUG等等、大多是因为开发人员虽然是再写WPF。

但是没有好好的学过WPF，就导致无法发挥出WPF的优势、很多地方都是开个线程处理完成后一个回调UI线程函数里面套一整段代码，这种情况下不仅难处理多线程问题、也会出现很多偶发性的BUG，不好追踪问题在哪里。同时也会因为开发人员对WPF的理解参差不齐导致架构设计和使用过程中代码凌乱。所以今天开始hello world 来梳理WPF。

我们通过hello world理解以下几个关键内容来整理XAML相关的知识点：

一、使用XAML创建可以显示hello world的文本框。

二、理解XAML中的文法规范级命名空间

三、XAML中的的属性和事件

四、从生成过程日志查看XAML的编译。

一、使用XAML创建可以显示hello world的文本框

　　经常写winform窗体的同学一定深有感触、拿到UI给的图之后、我们如果想做的比较漂亮。大部分都是通过拖控件、然后把用户界面的后台代码中设置动画效果、大小、位置等等。如果需要适配多种分辨率是更难受的。特别是一些需要深度定制的东西、可能很多开发时间都会用在这里。解决一些稀奇古怪被测试出来的的显示问题。

　　而在WPF中提出了XAML的概念、我们可以使用XAML标签来设计和构成我们的用户界面。而XAML丰富的标签一旦正确的使用，则会大大提高我们写出更漂亮的界面的能力。

只写文字大家都会反感。我们通过讲解例子来认识XAML。首先创建一个WPF工程。

1、写下第一行Hello world

打开VS选择创建WPF项目，点击下一步。

设置项目名称为Hello World点击创建。就创建了我们第一个WPF项目。

通过解决方案标签项我们可以看到整个解决方案的目录结构。而项目中的MainWindow就是我们本次分析的重点。

我们这次的重点在MainWindow.xaml和其对应的cs，所以其他部分不是本次的关注重点，也就不讲了。

首先双击MainWindow.xaml,在Grid标签中添加<TextBox Text="Hello world!"/>节点。然后在VS中按下F5键。程序就会执行编译，如果成功的话就会跑起来，并且看到我们输入的Hello world！。

<Window x:Class="HelloWorld.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:HelloWorld"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBox Text="Hello world!"/>
    </Grid>
</Window>

从我们看到这个显示出来的hello world！的这一刻开始，就正式开始了本章内容的讲解。

二、理解XAML中的文法规范级命名空间

 1 <Window x:Class="HelloWorld.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:HelloWorld"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="450" Width="800">
 9     <Grid>
10         <TextBox Text="Hello world!"/>
11     </Grid>
12 </Window>

为了方便理解，我加入了行号，如果想系统的学习XAML可以先学习一下XML，XAML是遵循XML文法规范的，但是对于我们入门来说了解嵌套、属性的赋值和设置，就可以了。

我们的整体XAML结构大致为

<Window>
　　<Grid>
　　　　<TextBox/>
　　</Grid>
</Window>

我们当前的XAML根节点是一个Window节点，Window节点代表当前所显示的整个窗口、在Window节点内部有一个Grid节点，Grid节点是一个布局元素里面可以放置的所有的控件、Grid节点包含了一个内部的TextBox节点，而这个TextBox就是我们所说的控件，而我们看到的显示的内容是在Text=“”内赋值的。对于XAML中的内容。可以理解为把后台的.cs代码文件通过xaml可视化的方式进行设置，如果有不知道含义的地方，可以用鼠标点在对应的节点上然后按F12就可以跳转到对应的定义中。

比如我们把光标点在Grid上。按下F12。就会跳转到下图的位置。原来Grid继承自一个Panel。里面包含了Column、Row等等。我们就知道了。Grid是一个拥有横、列的网格面板。

而在TextBox上按F12之后，就会看到这是一个控件、显示或编辑文本的。

其他的元素同样的道理。把鼠标放置在对应的元素节点上按下F12就会显示对应的内容。

接下来我们来看命名空间。

名称空间看上去好像是一个URI的WEB位置，但实际上不是，URI格式的命名空间，不同组织就基本不会使用相同的名称空间创建不同的基于XAML的语言。

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 是WPF核心名称空间。 它包含了所有WPF类，包括创建界面的控件。
该名称空间没有使用前缀、所以它成为整个文档的默认命名空间。也就是说除非指明了名称空间，否则每个元素都直接使用这个名称空间。

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 是XAML名称空间，它包含各种XAML的特性，该命名空间被映射为前缀x。可以在元素名称之前放置x
来使用该名称空间。例如x:Name,x:Class="HelloWorld.MainWindow"。

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"是旨在提供设计师支持，该名称空间使XAML元素上的这些属性仅影响XAML行为的设计方面。
而在运行过程中会忽略掉这些属性。比如d:DesignHeight="100" d:DesignWidth="100",这个在设计时看不到该控件时，在对应的控件上添加此属性特别有效。
在Blend下使用比较多的是针对集合的d:DataContext、d:DesignData。等等。感兴趣的可以看看Blend相关的。

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 标识使运行时XAML解析器能够忽略设计属性,比如mc:Ignorable:d。d前缀的在运行时XAML解析器解析时就会忽略了。

xmlns:local="clr-namespace:HelloWorld" 这个就是我们工程自己的名称空间了。

x:Class="HelloWorld.MainWindow" x:Class特性是告诉XAML解析器用指定的名称生成一个新类，该类继承自XAML元素命名的类，也就是我们的根节点Window。

三、理解XAML中的的属性和事件

　XAML中的属性：

我们通过前面的讲解了通过跳转查看XAML节点的含义，比如<Grid>是布局用的Panel。<TextBox/>是显示和编辑无格式文本的。
那么现在我们来理解属性。
在元素中我们通过跳转了解到了XAML节点都是一个一个的类对象。里面定义了属性、方法及事件。那么在XAML中，我们可以在这里设置属性、事件。通过设置这些来修改样式及监听对应的事件消息。
那么在属性中分为简单属性和复杂属性。我们在Textbox上按F12跳转过去，然后我们找个属性来演示一下简单属性和复杂属性如何使用。