UWP 应用中的 Button 控件

前言：无意中翻出的 2017 年自写的一份文稿，十分基础，遣词造句也不乏幼稚之感，属于基础中的基础，经删减编辑发布。（现在谁还开发 UWP 啊）

Button控件是构建程序的一个最基本控件，本文件将介绍如何在你的 UWP 应用中插入并使用Button控件。

本文件适用于：

Microsoft Visual Studio 2015(包括Update)
Microsoft Visual Studio 2017(V15.0,V15.2)

一、插入Button控件

打开你已经在Visual Studio里构建的一个项目，任何项目都可以。
当设计器完全加载后，你可以在左侧看到一个十分显眼的“工具栏”字样，让我们打开它。
找到其中的“Button”控件，拖动它到设计器里。
好了，现在你已经顺利的在程序中插入了一个按钮（Button控件）
二、 Button的位置与对齐方式
本节，我们将介绍如何修改button控件的位置与对齐方式。
修改Button控件位置与对齐方式的方法，有以下两种。

XAML编译器
你应该注意到，在插入Button控件后，屏幕下方的编译器立即生成了一行代码

<Button Content="Button" HorizontalAlignment="对齐方式 " Margin="位置坐标" VerticalAlignment="契合形式 "/>

修改Horizontal的值，例如将left修改为Right，按钮的位置立刻从最左边更换至最右边。
修改VerticalAlignment值，修改按钮的契合形式（一定意义上就像修改Windows的桌面背景契合度），例如将Top修改至Center,按钮立刻从边沿更改到了窗口的中央。
修改Margin值，例如将1,1,0,0修改到2,34,56,78，按钮的位置立刻更改，这就像在平面直角坐标系上确立一个点。
2. 设计器
你也可以在设计器里拖动Button控件以达到修改按钮位置，对齐方式和契合形式的目的。这就像在Microsoft PowerPoint里移动文本框一样。方便而又易于上手。

三、声明Button的名称和内容

在大多数软件中，按钮所呈现的多种多样，那么，如何修改我们的按钮所呈现的内容呢？
别着急，本节即将介绍这方面的内容。
首先，在设计器中选定刚刚我们添加的按钮，在Visual Studio的界面右侧立即出现了“属性”对话框。
单击“名称”，在框内输入你对于该按钮的命名。
随着命名的完成，你可以看到在XAML设计器里按钮代码行立刻出现了x:Name="你对于该按钮的命名 "部分。修改这一部分，你的按钮的名称亦会随之变化。
注意，这只是声明按钮的名字，和按钮所要呈现的内容无关，更改按钮所呈现的内容，请看下一段。
你可以注意到，本控件的代码中包含Content="按钮内容"的代码，该部分代码默认为Button，修改这一部分代码，你可以更改按钮所要呈现的文字。例如，将值更改为“Hello World”，那么按钮在运行时所呈现的内容也是“Hello World”
四、个性化按钮
想要个性化自己的按钮？Visual Studio亦给我们提供了这样的功能
在刚刚的代码右侧，你可以添加：Background="你想要的颜色"，这样，你就声明了本按钮的颜色值。例如：“Red”就是红色，“Green”就是绿色，“Yellow”就是黄色，“Blue”就是蓝色，“White”就是白色，“Orange”就是橙色，“Pink”就是粉色，“Purple”就是紫色，“Light-Blue”就是淡蓝色。
想要更改字体和字体大小？让我们转到之前提到过的“属性”选项卡。打开文本菜单，在第一个框中选择字体，选择后代码也会改变。例如选择字体“Microsoft YaHei UI”，代码会出现FontFamily="Microsoft YaHei UI"字样。
在第二个框中，你可以更改文字大小，更改的方法就像更改Microsoft Word的文字大小一样。
当更改完毕后，你可以看到本行代码：FontSize="你设定的大小"。在仔细观察后，你可能会发现代码中的值和你在“属性”对话框中所声明的值并不一样。这是因为Microsoft Visual Studio 2015在默认情况下，将属性中的值单位设定为“像素”，在XAML编译器中设定的单位为“磅”,这个对软件的开发并无任何问题，Visual Studio会自动换算这两个值。
在Microsoft Visual Studio 2017中一般不会出现这个问题。

五、总结

上述帮助文件中出现的“属性选项卡”和设计器中的工作，并不推荐你在上面花费太多功夫，而是希望你在XAML编译器中完成上述工作。毕竟，一个程序员最终还是要回归代码，不是吗？
最后，希望本帮助文件对你有所帮助。

2021 年 3 月 12 日