WPF语言中Grid布局

                                      WPF语言中Grid布局

1、什么是布局?这是一个很是简单的问题,简单来讲就是把一些控件条理的放在你想放的地方,就是把控件放在界面上合适的位置,让人看的不是乱七八糟的布局布局

2、WPF的布局控件有不少,不过咱们经常使用的布局控件就有五个spa

1Grid:网格。能够自定义行和列并经过行列的数量、行高列宽来调整控件的布局。近似Html中的table 就犹如:3d

2DockPanel:泊靠式面板。内部元素能够选择泊靠的方向(上下左右),相似于Winform中设置控件的Dock属性,就犹如:orm

3StackPanel:栈式面板。可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺。blog

4WrapPanel:自动折行面板。内部元素在排满一行后可以自动折行,相似于Html中的流式布局。it

5Canvas:画布。内部元素可使用以像素为单位的绝对坐标进行定位,相似于Windows Form 的布局方式。io

3、在WPF建立的是系统默认的布局是Grid布局table

1Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列。Grid和其余各个Panel比较起来,功能最多也最为复杂。同时此面板可承载任意元素,包括控件,图形,甚至文字。各类元素依据屏幕坐标肯定位置。form

那么咱们就利用Grid布局作一个登录页面,class

<Grid Width="200" Height="100" >

<!--定义了两列-->

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="100*"/>

</Grid.ColumnDefinitions>

 

<!--定义了四行-->

<Grid.RowDefinitions>

<RowDefinition Height="25"/>

<RowDefinition Height="25"/>

<RowDefinition Height="25"/>

<RowDefinition Height="25"/>

</Grid.RowDefinitions>

 

<TextBlock Grid.Row="0" Grid.Column="0" TextAlignment="Right" Text="用户名:" Name="UserName"/>

<!--第一行第一列-->

<TextBlock Grid.Row="1" Grid.Column="0" TextAlignment="Right" Text="密码:" Name="pass"/>

<TextBlock Grid.Row="2" Grid.Column="0" TextAlignment="Right" Text="确认密码:" Name="repass"/>

<Button Grid.Row="3" Grid.ColumnSpan="2" Height="23" Width="100" Content="确认" Click="Button_Click" Name="btn"/>

<!--Grid.ColumnSpan="2":合并单元格-->

<TextBox Name="TxtBoxName" Grid.Row="0" Grid.Column="1" Text="" />

<!--第一行第二列-->

<PasswordBox Name="pass1" Grid.Row="1" Grid.Column="1"/>

<!--密码框-->

<PasswordBox Name="pass2" Grid.Row="2" Grid.Column="1" />

</Grid>