用Xaml搭建一个登陆页面 _页面布局

撰写时间：2020.08.09
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
前段时间的学习中我了解到了一种程序语言：Xaml 。这是一种公开表示应用程序用户界面的标记语言，可使开发人员和设计人员用来构建和重用UI的工具更加丰富。对于Web开发人员，XAML提供了熟悉的UI说明模式。XAML还使UI设计从基础代码中分离出来，从而使开发人员和设计人员之间的合作更加紧密。学习Xaml之后我就开始尝试搭建了一个简易的登录界面。

文章插图
首先在Xaml中页面只能有一个布局控件，而Xaml布局控件则有五种，分别是网格布局控件(Grid)、泊靠式面板布局控件()、栈式面板布局控件()、自动折行面板布局控件()、画布面板布局控件() 。每一个布局控件都有着不同的特点和作用。这里就不详细说了，因为Xaml中页面只能有一个布局控件所以我们只能选择五种布局控件中的一种进行页面排版，但是布局控件是可以嵌套的这就使得页面可以更加多样化，可以将不同的布局控件融合在一起，使得页面更加绚丽。
现在我使用控件来作为页面的主控件，在里面在嵌套一个Grid控件来进行网格式排版。控件能够根据内容大小来自适应收缩，而Grid控件有两个属性：行(row)、列() 。网格网格，顾名思义就是他可以像网格那样进行分割，然后在每一个分割出来的板块中放入不同的内容，使得页面更加简洁。

文章插图
决定好主控件后我们既可以来进行属性样式的设置了，我们先把一个页面分成九块，分别设置三个行(row)和个列()，然后我们在设置一个网格控件(grid)来做布局准备，坐标取第一行，第一列的网格也就是最中间的那个网格。然后再在最中间的网格控件内设置三行(row)分别给账号、密码和登录做布局，设置两类给账号和文本框。具体代码如下：
【用Xaml搭建一个登陆页面】大概效果就是这样：