XAML布局元素(常用重点)
Grid:网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。
DockPanel:泊靠式面板。内部元素可以选择泊靠的方向(上下左右),类似于Winform中设置控件的Dock属性。
StackPanel:栈式面板。可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺。(菜单 栏)
WrapPanel:自动折行面板(环绕面板)。内部元素在排满一行后能够自动折行,类似于Html中的流式布局。
UniformGrid:均分布局(横向的网格分割、纵向的网格分割分别是均等的分割的布局类型,各个单元格的大小完全相同,宽与高分别 相同)
Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位,类似于Windows Form 的布局方式。
一、Grid网格
简介:
Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列。Grid和其他各个Panel比较起来,功能最多 也最为复杂。 要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素,从而定义行数 和列数。
而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其 放置所在的行和列,它们都是以0为基准的整型值,如果没有显式设置 任何行或列,Grid将会隐式地将控件加入在第0行第0列。
由于Grid的组成并非简单的添加属性标记来区分行列,这也使得用户在实际应用中可以具体到某一单 元格中,所以布局起来就很精细了。
特点:
可以定义任意数量的行和列,非常灵活。
行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定,并可以设置最大和最小值。
内部元素可以设置自己所在的行和列Grid.Row和Grid.Column,还可以设置自己纵向跨几行Grid.RowSpan,横向跨几列 Grid.ColumnSpan。
可以设置Children元素的对齐方向:水平HorizontalAlignment,垂直VerticalAlignment。
基于以上这些特点,Grid的适用场合有:
UI布局的大框架设计。
大量UI元素需要成行或者成列对齐的情况。
UI尺寸改变的时候,元素需要保留固有的宽度和高度比列。
注意:这里介绍一下Grid高度、宽度的几种定义方式:
1.绝对尺寸 就是给一个实际的数字,但通常将此值指定为整数, 像上图中中那样
2.自动 (Autosizing) 值为Auto,实际作用就是取实际控件所需的最小值
3.StarSizing 值为或N,实际作用就是取尽可能大的值,当某一列 或行被定义为则是尽可能大,当出现多列或行被定义 为则是代表几者之间按比例方设置尺寸
第一种,固定长度——宽度不够,会裁剪,不好用。单位pixel。
第二种,自动长度——自动匹配列中最长元素的宽度。
第三种,比例长度——表示占用剩余的全部宽度;两行都是,将平分剩余宽度;像上面的一个2*,一个*,表示前者2/3宽度。
1、Row和Column
我们下面举个例来介绍Grid的行的用法,及我们在UI设计过程中需要注意的细节。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" /><! --行1,高50-->
<RowDefinition Height="Auto" /><!--行2,高度:Auto根据子控件自动计算-->
<RowDefinition Height="*" /><!--行3,填充行1和行2占用后的其余的剩余高度-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition width="50"/><! --列1,宽度50-->
<ColumnDefinition width="Auto" /><!--列2,宽度:Auto根据子控件的宽度来自适应-->
<ColumnDefinition width="*" /><!--列3,填充列1和列2占用后的其余的剩余区域-->
</Grid.ColumnDefinitions>
</Grid>
效果图如下: