UWP小书 - 建立第一个应用
:::tip
本章涉及知识点：
- 如何建立项目
- 如何启动项目
- 如何加入控件
- 如何修改控件属性，改变外观
:::
视频地址：BiliBili
让我们先无视掉复杂的基础知识，直接开始建立第一个UWP应用吧！
新建项目
打开Visual Studio，按以下步骤操作：
文件 --> 新建 -->项目，或者直接按快捷键 Ctrl+Shift+N。
按照下图所示选择 空白应用(通用Windows)，填写合适的名称并选择合适的路径，点击确定。
这时，IDE会弹出一个窗口，询问你应用支持的版本
咱们这时候就不管什么平台兼容性了，直接把最低和目标版本都设为最新的系统版本（当然，这要你的系统本身是最新版本才行）
现在，你就新建了一个UWP应用啦！
:::tip
由于我们下节课也会围绕这个新建立的APP展开，所以请认真对待哟~
会使用Git的童鞋可以新建Git存储库，通过Git记录自己的学习过程
:::
启动项目
当项目建立完成之后，你会发现项目内包括了很多的文件。
这些文件具体是什么意思，且让我按下不表，因为现在的你恐怕没耐心听我解释。
让我们直接启动这个新建的应用吧！
看到VS顶部的这块区域了吗？那个绿色的形似播放按钮的三角符号就是启动按钮了。
按下，启动！
你可以看到VS下方的输出窗口在不停地吐字，这表明VS正在编译代码，并将编译后的应用部署在你的计算机上，部署完成后，应用会自动打开。
当然，现在的应用什么都没有，但这是个好的开始。
接下来关掉应用，让我们往应用里面塞点东西吧！
写下 Hello World
Hello World是一个颇具魔力的短语，几乎所有的编程语言都会从这里开始，这已经演变成编程传统了。那么在这里，我们便依从传统，从让应用显示Hello World开始吧！
MainPage
看看我们的项目文件，找到MainPage.xaml，双击打开它。
现在VS中央会出现一个对半分的界面，上面是预览，下面是代码，这里就是我们写界面的地方了。通常情况下，我们是不会让这两个窗口同时存在的，这太占地方了！
在我向你解释为什么打开MainPage之前，先在两个窗口的隔离带的右侧找到向下的箭头按钮，鼠标移上去会显示折叠窗格，点一下，是不是感觉清爽了许多？
在界面下方有两个选项卡，你可以在XAML和设计界面之间切换。现在让我们切换到XAML。
好了，让我来解释下为什么要打开这个MainPage吧。
简而言之，MainPage就是你方才打开应用时看到的那个白白的(或者黑黑的)界面，MainPage直译过来也就是主页的意思。我们接下来敲Hello World就要在这个主页上敲，所以我们才要打开它。
至于为什么UWP应用启动就会显示MainPage页面，以及UWP应用能不能有其他页面的问题，我会在文末小结中做出解释。
TextBlock
XAML说穿了，就是XML的一种变体，这是一种标记语言，这里我不会解释太多，感兴趣的同学可以在延伸阅读中找寻资料。
同样是XML的变体，网页所使用的HTML就比XAML名气响的多。如果你有学过网页，那么看到这个XAML的语法想必不会陌生。
相比起HTML，XAML的语法可是严格的多。
我们先忽略Page后面跟着的一大堆属性，把目光锁定在Grid上面：
1 | <Page |
Grid就是我们写Hello World的地方了，你可以试试直接在Grid里面写Hello World。
打波浪线了，对不对😀
这就是报错，告诉你不能这么写，而HTML里就可以，这也是XAML比HTML严格的一种体现。
我们想要显示文字，那么这里我们就必须要放一个显示文字的控件才行。
这个控件就是TextBlock
在Grid中输入以下内容：
1 | <Grid> |
TextBlock，这是你亲手输入的第一个控件，也是你以后会接触得最多的控件，它的作用就是显示一段文本。
现在，在TextBlock两个标签的中间输入内容：
1 | <Grid> |
OK，没有报错，一切都很好。现在，再次运行应用。
应用的左上角，一个小小的Hello World就出现咯~
变粗，变大，还要居中
这样一个小小的Hello World肯定不能满足你，作为你的第一个应用里的第一句话，一定要够大够粗够醒目才行。
接下来让我们对这个TextBlock进行改动吧！
变粗
TextBlock作为一个文本控件，自然有法子控制文本该如何显示，它自带了诸多属性，使用者可以通过改变这些属性来对文本的显示方式进行调整。
让我们先把文本变粗吧。
TextBlock控制文本粗细的属性是FontWeight，在TxetBlock的标签内敲下FontWeight，得益于IDE的强力支持，你可以看到不用你全部输入完成，编辑器会帮助你进行自动补全，敲下FontWeight后，编辑器会提示你所有的候选值：
既然是加粗，我们就选择 Bold。
1 | <Grid> |
运行软件看看，是不是变粗了？
变大
控制文本字号的属性是FontSize，FontSize需要设置为数字，这个数字有一个隐藏的单位，称之为epx，关于epx的具体信息，可通过延伸阅读查看。
UWP默认的文本字号为16，这里我们可以设置为40。
1 | <Grid> |
运行软件看看，是不是变大了呀~
居中
Hello World变得又大又粗了，但还有个缺憾，它似乎太靠左上了。这样一个大家伙，不居中不能给人以冲击感啊。
如何居中呢？
TextBlock有两个属性HorizontalAlignment和VerticalAlignment，顾名思义，前者控制水平对齐，后者控制垂直对齐。
经过前面的变大变粗，相信这里不用我赘述了。分别将这两者设置为Center，运行应用，看看效果吧！
1 | <Grid> |
怎么样，又大又粗的Hello World居中显示在你的面前，这都是你自己敲出来的哦。
现在我可以恭喜你——你亲手创建了一个UWP应用！
小结
在创建应用的喜悦之后，让我们来沉淀一下，请你耐心地看完我接下来说的知识，这对你理解UWP应用有一定的帮助。
为什么软件打开之后会显示MainPage
在项目中，除了MainPage.xaml之外，还有一个App.xaml，它控制了整个应用的生命周期，换句话说，它控制了应用从打开到关闭的全过程。但你双击打开它，你会发现里面好像什么都没有。
这里就有一个玄机了。你会发现，App.xaml的前面有一个三角符号，点一下它，App.xaml的下面多出来一个文件，名为App.xaml.cs（这种隐藏式文件被称作 Code-Behind），双击打开它。
这里的信息量就很大啦，微软贴心地在里面写上了注释。细心观察，你会发现，在OnLaunched函数里，软件的Frame默认就导航到了MainPage中。所以你才会在打开软件的时候看到MainPage。
什么是Frame
我们可以类比浏览器。
浏览器的结构是什么样的呀？上面是控制面板，下面是内容浏览。
那个内容浏览的区域，就是Frame。整个UWP应用，就好比一个去掉控制面板的浏览器。
你的MainPage就好比是一个网页，网页可以在浏览器里来回跳转，可以切换到其它的网页，只要在Frame里，那就随你折腾，所以有些人戏称UWP就是个浏览器套壳应用。说是这么说，各位可一笑置之，莫要当真。
由此可知，一个UWP应用可以有很多个Page，正是通过这些Page之间的切换，我们才可以实现应用的诸多功能。但一个应用是不是也可以有很多个Frame呢？
是的，可以有！
但RootFrame只有一个，那就是Window。从视觉上说，就是你的应用周围那浅浅的灰边组成的框。Frame里可以嵌套Frame，但大家的祖宗都是Window。这就是UWP应用区别于传统Windows应用的一个特点。
过去的桌面应用，基本组成单元就是Window，软件是Window，对话框也是Window，只要你想，一个Win32应用可以弹出很多个Window，但UWP应用却只有一个Window（不久之后将允许多实例，但本质未变）。
TextBlock为什么要写在Grid里面？
问出这句话，相信你已经尝试把TextBlock写在外面了，勇于尝试，这是好事。尝试过之后，你会发现即便不要Grid也可以显示文本。但如果想再加一个TextBlock，IDE就会无情报错，告诉你已多次设置属性Content。
这里的Content，指的是Page的属性Content，在两个Page标签之间的内容，均可视作Content。
Page的Content属性只允许其中有一个元素，换句话说，里面只能有一个TextBlock。而我们的Grid，它里面允许有多个元素，这就是我们为什么要把TextBlock放在Grid中的原因。
像Grid这样可以容纳其它控件的控件，我们称之为容器，类似的容器还有StackPanel、RelativePanel等。
延伸阅读
小尝试
完成上面的应用创建其实很简单，并不会花多长时间，但如果你愿意挑战一下自己的话，我也为你准备了一些你能完成的操作，但可能需要你稍微查一下资料。
- 更改文本的字体（FontFamily）
- 更改文本的对齐方式（TextAlignment）
- 更改文本颜色（Foreground）
- 试试改变TextBlock的位置，设置为左上，右上，右下，左下
- 新建一个TextBlock控件，写上很多字，形成如下排版：
- Grid造成文本重叠的话，试试StackPanel
- 文本不能自动换行的话，试试
MaxWidth和TextWrapping的组合 - 用用
Margin
![wechat]()
wechat![alipay]()
alipay
津公网安备 12011002021027号