XAML布局元素

XAML布局元素
一、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高度、宽度的几种定义方式: 名称
说明第一种,固定长度——宽度不够,会裁剪,不好用。单位pixel。
第二种,自动长度——自动匹配列中最长元素的宽度。
第三种,比例长度——表示占用剩余的全部宽度;两行都是,将平分剩余宽度;像上面的一个2*,一个*,表示前者2/3宽度。
1、Row和Column
我们下面来介绍Grid的行的用法,及我们在UI设计过程中需要注意的细节。绝对尺寸 就是给一个实际的数字,但通常将此值指定为整数,像上图中中那样 自动(Autosizing)值为Auto,实际作用就是取实际控件所需的最小值 StarSizing
值为或N,实际作用就是取尽可能大的值,当某一列
或行被定义为则是尽可能大,当出现多列或行被定义
则是代表几者之间按比例方设置尺寸
为了加深大家对Grid布局的印象,我们这里加入控件来展示效果。
下面在每个单元格都加入子控件

二、DockPanel:泊靠式面板
DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。DockPanel会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序。在DockPanel中,指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。默认情况下,后添加的元素只能使用剩余空间,无论对DockPanel的最后一个子元素设置任何停靠值,该子元素都将始终填满剩余的空
间。如果不希望最后一个元素填充剩余区域,可以将DockPanel属性LastChildFill设置为false,还必须为最后一个子元素显式指定停靠方向。
使用场合:DockPanel停靠容器,专门负责自适应窗口的布局。

三、StackPanel:栈式面板
StackPanel就是将控件按照行或列来顺序排列,但不会换行。通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal)和竖排(Vertical默认的)。水平排列时,每个元素都与面板一样高;垂直排列时,每个元素都与面板一样宽。如果包含的元素超过了面板空间,它只会截断多出的内容。元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属
特点:
每个元素各占一行或者一列 使用场合:同类元素需要紧凑排列(如制作菜单和列表)。
移除其中的元素后能够自动补缺的布局或者动画。StackPanel 适合水平或者垂直方向的布局,在上面的例子中我们大量的使用该种布局方式。适合局部区域的布局,比如菜单栏,我们来使 用StackPanel来进行布局设置子控件的停靠方式时,不会起到任何作用,默认情况下,Stack的水平布局时,从左至右。修改了FlowDirection设置了StackPanel的方向后,所有的子控件,都是从右向左方向进行绘制和显示,效果如下: 所以对于StackPanel我们基本上是用上述的属性和对StackPanel的停靠方式进行设置后,即可满足布局的要求

四、WrapPanel:自动折行面板(环绕面板) WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或
从右至左的顺序进行。Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行。ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。 ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比
ItemWidth高的元素都将被截断。

五:UniformGrid:均分布局
介绍了前面的Grid,接下来介绍的这个UniformGrid 就是Grid的简化版,每个单元格的大小相同,不需要定义行列集合。每个单元格始终具有
相同的大小,每个单元格只能容纳一个控件,将自动按照定义在其内部的元素个数,自动创建行列,并通常保持相同的行列数UniformGrid 中没有Row 和Column 附加属性,也没有空白单元格与Grid布局控件相比,UniformGrid布局控件很少使用。Grid面板是用于创建简单乃至复杂窗口布局的通用工具。UniformGrid面板是一个一 种更特殊的布局容器,主要用于在一个刻板的网格中快速地布局元素。 UniformGrid 布局面板和Grid 面板相似,将子元素按照行列的方式排列。但是可以Grid 有一下不同:

  • 不需要指定行和列的大小
  • 所有列都是相同的宽度
  • 所有行都是相同的高度
  • 要指定预期的行和列的数目
  • 不需要给子元素指定所在的行和列
    子元素将自动的根据添加是顺序从第一行开始显示在对应的行和列中,每样都是从左至右。
    UniformGrid 中的第一个子元素不一定必须在第一行第一个单元格。设置FirstColumn 属性可以设置子元素显示的起始列(最小为0)。
    六:Canvas:画布面板
    画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。
    使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元素都将出现在画布的左上角。调整位置用Left、Right、Top
    和Bottom四个附加属性。
    如果Canvas是窗口主元素(即最外层的布局面板是Canvas),用户改变窗口大小时,Canvas也会随之变化,子元素的位置也会随之移
    动,以保证相对于Canvas的位置属性不变。
    Canvas允许子元素的部分或全部超过其边界,默认不会裁剪子元素,同时可以使用负坐标,即溢出的内容会显示在Canvas外面,这是因
    为默认 ClipToBounds=”False”,因此画布不需要指定大小。如果想复制画布内容,将ClipToBounds设为true即可。

版权声明:本文为hu15180924991原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。