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上面：

<Page
    ...>

    <Grid>
        <!--这里是我们写内容的地方-->
    </Grid>
</Page>

Grid就是我们写Hello World的地方了，你可以试试直接在Grid里面写Hello World。

打波浪线了，对不对😀

这就是报错，告诉你不能这么写，而HTML里就可以，这也是XAML比HTML严格的一种体现。

我们想要显示文字，那么这里我们就必须要放一个显示文字的控件才行。

这个控件就是TextBlock

在Grid中输入以下内容：

1
2
3

<Grid>
    <TextBlock></TextBlock>
</Grid>

TextBlock，这是你亲手输入的第一个控件，也是你以后会接触得最多的控件，它的作用就是显示一段文本。

现在，在TextBlock两个标签的中间输入内容：

1
2
3

<Grid>
    <TextBlock>Hello World</TextBlock>
</Grid>

OK，没有报错，一切都很好。现在，再次运行应用。

应用的左上角，一个小小的Hello World就出现咯~

变粗，变大，还要居中

这样一个小小的Hello World肯定不能满足你，作为你的第一个应用里的第一句话，一定要够大够粗够醒目才行。

接下来让我们对这个TextBlock进行改动吧！

变粗

TextBlock作为一个文本控件，自然有法子控制文本该如何显示，它自带了诸多属性，使用者可以通过改变这些属性来对文本的显示方式进行调整。

让我们先把文本变粗吧。

TextBlock控制文本粗细的属性是FontWeight，在TxetBlock的标签内敲下FontWeight，得益于IDE的强力支持，你可以看到不用你全部输入完成，编辑器会帮助你进行自动补全，敲下FontWeight后，编辑器会提示你所有的候选值：

既然是加粗，我们就选择 Bold。

1
2
3

<Grid>
    <TextBlock FontWeight="Bold">Hello World</TextBlock>
</Grid>

运行软件看看，是不是变粗了？

变大

控制文本字号的属性是FontSize，FontSize需要设置为数字，这个数字有一个隐藏的单位，称之为epx，关于epx的具体信息，可通过延伸阅读查看。

UWP默认的文本字号为16，这里我们可以设置为40。

1
2
3

<Grid>
     <TextBlock FontWeight="Bold" FontSize="40">Hello World</TextBlock>
</Grid>

运行软件看看，是不是变大了呀~

居中

Hello World变得又大又粗了，但还有个缺憾，它似乎太靠左上了。这样一个大家伙，不居中不能给人以冲击感啊。

如何居中呢？

TextBlock有两个属性HorizontalAlignment和VerticalAlignment，顾名思义，前者控制水平对齐，后者控制垂直对齐。

经过前面的变大变粗，相信这里不用我赘述了。分别将这两者设置为Center，运行应用，看看效果吧！

1
2
3

<Grid>
    <TextBlock FontWeight="Bold" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</TextBlock>
</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

轉載來自 https://blog.richasy.cn/