WPF常见布局面板用法及介绍
目录
- 常见的几个布局面板
- 1.stackpanel面板
- 2.warppanel面板
- 3.dockpanel面板
- 5.uniformgrid面板
- 6.canvas面板
常见的几个布局面板
1.stackpanel面板
stackpanel面板能够简单根据单行或者单列进行元素排列, stackpanel 默认的布局方向为垂直方向(vertical), 由orientation属性控制。
orientation属性：
用户控制布局方向是垂直还是横向排列。分别有两个值可选：vertical、horizontal
示例代码：
<stackpanel orientation="vertical">
<button>button1</button>
<button>button2</button>
<button>button3</button>
</stackpanel>效果图(如上面所述 stackpanel面板orientation属性默认为vertical)：
设置 orientation="horizontal" 时, 控件布局方向则为横向, 效果图。
默认情况下, stackpanel面板中的元素都会根据stackpanel的大小而改变, stackpanel面板指定了width和height值。
布局属性：
| verticalalignment | 当垂直方向有额外的空间, 可以选择top、center、bottom、stretch进行设置布局 |
| horizontalalignment | 当水平方向有额外的空间, 可以选择center、left、right、stretcj进行设置布局 |
| margin |
相对控件的4个边、设置边距,可以单独设置各个边距,也可以统一设置一个边距 类似：margin="1 2 3 4" 或 margin="1" |
【verticalalignment/horizontalalignment】属性:
为了能够看到效果, 通常预留控件额外的空间, 示例, 默认的stackpanel面板中添加几组按钮, 剩下的白色区域为额外的空间。
这个时候, 针对stackpanel面板设置verticalalignment属性为center, 此时所有的子元素被居中显示,额外的空间被均分。
注:而bottom、top、stretch 则分别表示整体元素居下，居上、整体伸展。
默认情况下, stackpanel面板的verticalalignment、horizontalalignment 默认属性均为 stretch
<!-- stackpanel -->
<stackpanel verticalalignment="center">
<button>button1</button>
<button>button2</button>
<button>button3</button>
</stackpanel>效果图:
margin(边距)属性：
正如前人书中所说, 一个设计良好窗口不止是包含元素、还应当在元素之间包含一定的额外空间。所以这个时候margin属性派上用场。
以上的示例图中, 均没有设置margin属性, 所以会看到的是, 每个元素之间都紧贴。
当设置边距时, 可以统一设置元素所有边的距离, 如下所示：
<!-- stackpanel -->
<stackpanel>
<button margin="3">button1</button>
<button margin="3">button2</button>
<button margin="3">button3</button>
</stackpanel>另外一种,则是分别对元素的边: 左、上、右、下的顺序设置边距, 如下所示：
<!-- stackpanel -->
<stackpanel>
<button margin="3 6 3 3">button1</button>
<button margin="3">button2</button>
<button margin="3">button3</button>
</stackpanel>2.warppanel面板
与stackpanel面板类型, warppanel面板也是以行或列的形式进行元素排列, 默认情况下, warppanel面板的orientation属性则为horizontal,元素以横向进行排列。
注意：与stackpanel面板不同的是, warppanel默认情况下, 所有元素均不会被拉伸。这里要强调的一点: stackpanel中, 元素会根据orientation属性进行拉伸,
1.当orientation="horizontal"时, 元素被垂直拉伸
2.当orientation="vertical"时, 元素被水平拉伸
示例图：
同样的, warppanel面板具备stackpanel的属性。区别则在于上面的不同。
3.dockpanel面板
用过winform的小伙伴应该都知道, 在winform中, 几乎所有的空间都具备dock停靠属性, 可以针对元素进行单独设置dock定位。然而在wpf中, 这点显然是不具备的。
所以对于灵活的wpf来说, dockpanel面板具备了这个能力。凡是包含在dockpanel面板中的子元素, 都会具备dock附加属性。
下图所示, 对dockpanel进行简单的添加元素设置dock属性:
示例代码：
<dockpanel>
<button dockpanel.dock="top">button1</button>
<button dockpanel.dock="right" >button2</button>
<button dockpanel.dock="left">button3</button>
</dockpanel>注意：dockpanel的lastchildfill属性, 主要用于设置dockpanel中最后一个元素的会具备填充效果。如上图的button3元素
lastchildfill 字面意思则可以理解, 最后一个元素是否填充。通过设置true/false,
效果图(lastchildfill="false") :
<dockpanel <strong>lastchildfill="false"</strong>>
<button dockpanel.dock="top">button1</button>
<button dockpanel.dock="right" >button2</button>
<button dockpanel.dock="left">button3</button>
</dockpanel>4.grid面板
grid面板类型html中的table表格, 为了能够让元素或内容按照规定的位置排列, 首先得定义足够得行和列。
注意: grid中定义得row与column属性默认在元素中都是从0开始索引, 在下面示例中,为了演示都进行了添加(如果在程序中,位置已经确定, 可以默认不加)。
定义行与列( rowdefinitions/columndefinitions)
<grid>
<strong> <!-- 下面分别定义了2行 2列 --></strong>
<grid.rowdefinitions>
<rowdefinition/>
<rowdefinition/>
</grid.rowdefinitions>
<grid.columndefinitions>
<columndefinition/>
<columndefinition/>
</grid.columndefinitions>
</grid>添加元素:
下面为grid定义得2行2列基础上添加4个按钮, 下图所示：
代码所示:
<grid>
<!-- 下面分别定义了2行 2列 -->
<grid.rowdefinitions>
<rowdefinition/>
<rowdefinition/>
</grid.rowdefinitions>
<grid.columndefinitions>
<columndefinition/>
<columndefinition/>
</grid.columndefinitions>
<button grid.column="0" grid.row="0">左上</button>
<button grid.column="1" grid.row="0">右上</button>
<button grid.column="0" grid.row="1">左下</button>
<button grid.column="1" grid.row="1">右下</button>
</grid>注意:尽管一个单元格中, 允许放置多个元素, 通常来说这没有什么意义。如上所示, 每个元素都明确了对应单元格中。
grid与warppanel和stackpanel面板等容器不同得区别在于, grid需要显式定义行与列来放置元素。而相对于其他容器,则会隐式创建行与列。
调整行和列：
grid面板支持3种设置尺寸的方式：
| 硬编码尺寸 | width="xxx" / height="xxx" |
| 自动设置尺寸 | width="auto" / height="auto" |
| 按比例设置尺寸 | width="*" / height="2*" |
例如, 下面的代码演示了三种设置尺寸的方式：
<grid>
<!-- 下面分别定义了2行 2列 -->
<grid.rowdefinitions>
<rowdefinition height="auto" />
<rowdefinition height="100"/>
</grid.rowdefinitions>
<grid.columndefinitions>
<columndefinition width="*"/>
<columndefinition width="2*"/>
</grid.columndefinitions>
<button grid.column="0" grid.row="0">左上</button>
<button grid.column="1" grid.row="0">右上</button>
<button grid.column="0" grid.row="1">左下</button>
<button grid.column="1" grid.row="1">右下</button>
</grid>实际的显示效果可以看到, 第一列width="*" 为第二列的1/2, 第一行设置的自适应高度, 而第二行则是硬编码的高度 100
注意: 当使用grid进行按比例设置列或者行时, 如果grid宽度为奇数像素, 那么被分割的行列像素带小数, 当改列包含形状元素、边框、图像, 那么显示内容可能是模糊的,
如果这个问题影响布局, 则只需要将grid的uselayoutrounding属性设置为true即可。
跨行与跨列：
处于grid中的任意元素, 都具有两个附加属性, 分别为 rowspan与 columnspan。像这种跨行跨列在web应用中十分常见。
下面的示例中演示了如何针对元素进行跨列显示：
5.uniformgrid面板
与grid相反, uniformgrid并不遵循grid的众多原则, 无论是显式声明行和列, 还有其附加属性。反而, 通过简单的设置
rows和columns属性来设定其尺寸。每个单元格都被均匀分配, 关键一点, 所有元素最后都根据其定义的先后顺序放置在
单元格中。
示例代码如下：
<uniformgrid rows="2" columns="2">
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
</uniformgrid>6.canvas面板
canvas面板允许使用精准的坐标放置元素, 为了在canvas面板中定位一个元素, 需要设置canvas.left 和 canvas.top属性。
code：通过设置元素的附加属性 canvas.left 、top、right、bottom 等进行元素定位
<canvas>
<button canvas.left="100" canvas.top="50">button1</button>
<button canvas.left="100" canvas.top="80">button2</button>
</canvas>
到此这篇关于wpf常见布局面板用法及介绍的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持萬仟网。
看完文章，还可以用支付宝扫描下面的二维码领取一个支付宝红包，目前可领1-88元不等
除了扫码可以领取之外，大家还可以（复制 720087999 打开✔支付宝✔去搜索， h`o`n.g.包哪里来，动动手指就能领）。
看下图所示是好多参与这次活动领取红包的朋友：
