WPF使用XAML来搭建一个登录窗口

在Wpf项目中的学习中，在WPF中，我了解到常用的窗口页面布局元素有五个，分别为Grid网格，DockPanel泊靠式面板，StackPanel栈式面板，WrapPanel自动折行面板，Canvas画布。

使用grid网格布局，通常采用grid网格面板来进行布局，grid网格面板，就好比如一张格子网，将一个页面分隔成我们想要的行列，在其中放入具体的内容,控件，或其他布局元素进行组合呈现预想中的样子。

泊靠式面板：内部元素可以选择泊靠的方向（上下左右）。

栈式面板：可将包含的元素在水平或垂直方向排成一条线，后面的元素会自动向前填充空缺。常用用于制作菜单栏。

WrapPanel：自动折行面板，内部元素在排满一行后能自动折行，类html中流式布局

Canvas：画布，内布元素可以使用像素为单位的绝对坐标进行定位。常用于制做动画。

 

那么我们将使用xaml来搭建一个登录窗口，打开vs2015后，创建一个wpf项目，在项目中新建wpf窗口项，因此得到一个窗口设计页面，在vs设计器中，充分体现所见即所得的思想，在设计器中的设计成如何运行后就是如何。搭建一个登录窗口，设计窗口所在位置，大小，标题及启动图标样式。这样就能得到一个空白的特定大小的窗口

设计一个登录窗，使用网格布局，按照设想中的比例，将页面进行划分切割，比如说，将页面切割成三行三列，九宫格的样子。默认下为等比例切割，但可以设定为特定的比例。在指定放一个border，这个网格里用来设定用户账号，密码等用户输入内容的文本，因而设定其背景色彩，背景色彩的设置与其他背景色形成对比，吸引用户注意力。

如下源码，

在完成设置后，需要往里面填加具体的设置，如何将内容放入呢？需要使用附加属性语法定义放置所在的行和列。登录页，具体为什么登录，所以这里需要一个标题，明确提示，登录的系统是什么系统，这里使用自动折行面板，将自动折行面板放置在第0行，第0列中，因所展示的内容较长，跨两列，方向水平，得到一个横向的条幅。将用户登录时的图平放置在第一行中。

在内容区里放置用户登录时需要的输入的账号及密码的文本框，登录按钮等，由于放置的内容较多，需要将单个网格进行再划分为若干网格，为了让用户账号及密码输入框看起开和谐美观，将部分空间划分用于分隔。使用textblock控件放置文本，使用textbox放置用户输入框。

使用button按钮设置登录按钮及取消登录按钮，由于默认下的按钮样式，过于单调，所以重新设置了按钮的样式，更改其默认下的边框画刷，背景色，重设其内容文本的字体的样式，大小。

页面窗口效果如下图：

本文地址：https://blog.csdn.net/weixin_44540195/article/details/107898862