认识WPF六大基础布局控件

时间:2024-04-08 11:25:19

(1)WPF六大常用布局元素:
1、Grid:网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局,近似HTML代码中的table。
2、DockPanel:泊靠式面板。内部元素可以选择泊靠的方向(上下左右),类似于Winform中设置控件的Dock属性。
3、StackPanel:栈式面板。可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺(菜单栏经常用到此布局)。
4、WrapPanel:自动折行面板。内部元素在排满一行后能够自动折行,类似于Html中的流式布局。
5、Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位,类似于Windows Form 的布局方式。
6、注意,以上只是XAML常用的五大布局元素,并不是只有五种布局。

(2)Grid网格布局:
1、它的子控件被放在一个个实现并定义好的小格子里整齐配列。
2、功能最多且最为复杂。
3、要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions【行】和 ColumnDefinitions元素【列】从而定义行数和列数
4、如果没有设置任何行或列,Grid将会默认地将控件添加在第0行第0列,从0开始。
5、适用场合:①UI布局的大框架设计。②大量UI元素需要成行或者成列对齐的情况。③UI尺寸改变的时候,元素需要保留固有的宽度和高度比列。
6、特点:①可以定义任意数量的行和列,灵活性高。②行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定,并可以设置最大和最小值。③内部元素可以设置自己所在的行和列,还可以设置自己纵向跨几行,横向跨几列。④可以设置Children元素的对齐方向。
7、Grid的常用附加属性,如下图:
认识WPF六大基础布局控件
8、Grid中的行高与列宽,①比例值:【double数值加单位后缀(1cm)】、②绝对值:【double数值后加星号(“*”)】、③自动值【字符串Auto】。
9、将内容结合Grid的附加属性使用,可以确定内容的位置,并准确的对内容进行排版。
10、Grid.ColumnSpan:设置元素占表格两列位置。Grid.RowSpan:设置元素占表格两行位置。这两种附加属性均为跨行占位效果,不写这两种附加属性的话,默认是只占表格中的一格位置。
11、如果对元素设置了固定的宽高,那么,该元素的占位就会依据设定好的宽高来进行占位,跨行跨列附加属性对它无效。
12、垂直【HorizontalAlignment】与水平【VerticalAlignment】这两种属性可指定元素的对齐方式,默认的属性值为Stretch(不变)。

(3)DockPanel泊靠式面板:
1、定义出一个区域,在该区域中,可以使子元素通过描点的形式进行排列,此类对象位于Children属性当中,Children属性可以省略。
2、DockPanel会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序
3、指定停靠在边上的控件,会根据定义的顺序占领边角,所有控件绝不会交叠
4、默认情况下,后添加的元素只能使用剩余空间,无论对DockPanel的最后一个子元素设置任何停靠值,该子元素都将始终填满剩余的空间。若不希望最后一个元素填充剩余区域,可将DockPanel的属性LastChildFill设置为false后,再为其指定停靠方向。
5、常用于自适应窗口布局,泊靠的方向即上、下、左、右。
6、元素默认占整个表格的高度,宽度则由内容来决定,为指定泊靠的方向时,元素默认从左侧开始排列,后添加进来的元素将会占领页面剩余的所有空间。
7、通过DockPanel.Dock附加属性来指定元素泊靠的方向。
8、当元素被指定了上、下作为泊靠的方向,元素的内容则决定了元素的高度,宽度则默认占页面的一整行。
9、最后一个添加的元素占据的位置最小,因为先添加的元素权限比它大,因此,宽度无法占满一整行。
10、如何让最后一个添加进去的元素不占据剩余空间:通过LastChildFill附加属性,将其设置成false,最后一个添加进去的元素将不再占据剩余空间。
11、与网格Grid布局的相同点:都是通过附加属性来对元素进行排版。不同点:网格Grid是行列排版,DockPanel则是通过元素泊靠的方向来排版。

(4)StackPanel栈式面板:
1、将控件按照行或列的顺序进行排列,但不会换行。
2、通过Orientation属性,设置了两种排列方式:横排(Horizontal【默认】)和竖排(Vertical)。
3、默认情况下为垂直排序,水平排列时,每个元素都与面板一样高。垂直排列时,每个元素都与面板一样宽。
4、注意:若包含的元素超出了面板的空间,它会截断多出的内容【不会换行】。
5、特点:每个元素各占一行或一列。
6、适用场合:①同类元素需要紧凑排列时(如:制作菜单与列表)。②移除其中的元素后,能自动补缺的布局或动画。
7、栈式面板通过三个属性值来控制内部元素的布局,如下图:
认识WPF六大基础布局控件
7、设置了垂直排布后,面板内的元素将无法设置宽度。水平排布,则无法设置高度。

(5)WrapPanel自动折行面板(环绕面板):
1、面板会将各个控件从左至右按照行或列的顺序排列,当长度或高度不够时会自动调整换行,后续排序则按照从上至下或从右至左的顺序进行排序。
2、三种附加属性:①Orientation:根据内容自动换行。Orientation的属性值为 Horizontal时,元素是从左向右排列的,然后自上至下自动换行。当Orientation的属性值为Vertical,元素是从上向下排列的,然后从左至右自动换行。 ②ItemHeight:所有子元素高度都一致。每个子元素填充高度的方式取决于VerticalAlignment属性与Height属性,任何比ItemHeight高的元素都将被截断。③ItemWidth:所有子元素都宽度都一致。每个子元素填充宽度的方式取决于VerticalAlignment属性与Width属性,任何比ItemWidth宽的元素都将被截断。
3、排序的方向可以通过附加属性去控制,设置HorizontalAlignment属性可以改变元素的排列方向,默认从左侧开始排列。
4、只要窗口的宽度足够,面板内的元素就会一直排下去,直至排满后自动换行。

(6)Canvas画布面板
1、属于布局控件中最为简单的一种,可以完全控制每个元素的精确位置,它能直接将元素放到指定的位置。
2、主要用来布置图面。
3、使用画布面板前,必须要先指定一个子元素的位置,否则所有元素都会出现在画布的左上角
4、用Left、Right、Top和Bottom四个附加属性调整元素的位置
5、窗口大小发生改变时,Canvas面板也会随之变化,子元素的位置也会随之移动,以此来保证相对于Canvas的位置属性不变。
6、画布面板允许子元素的部分或全部超出窗口边界,默认不会裁剪子元素
7、Canvas面板并不简单,因为要去计算每个元素放置的位置。