WPF UI界面自适应绘制小结，并解决ScrollViewer与Table水平合并问题

最新推荐文章于 2022-08-11 17:39:39 发布

WPF 布局介绍

1、StockPanel: StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。简称堆放式布局。与wrappanel不同，子页面高度或者宽度默认与当前的StockPanel是一样的，简称为同高模式。
示例：

<StackPanel>

    <Button Content="Button"/>

    <Button Content="Button"/>

    <Button Content="Button"/>

</StackPanel>

显示：
在这里插入图片描述
示例：

<StackPanel Orientation="Horizontal">

    <Button Content="Button"/>

    <Button Content="Button"/>

    <Button Content="Button"/>

</StackPanel>

显示：
在这里插入图片描述

注意：Orientation="Horizontal"时，设置FlowDirection属性为RightToLeft，，则元素将从右向左排列。
2、WrapPanel : WrapPanel布局面板将各个控件按照一定方向罗列，当长度或高度不够时自动调整进行换行换列。简称流式布局。也称自动折行面板。

Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列。

Orientation=" Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。
示例：

<WrapPanel Orientation="Horizontal">

    <Button Content="Burron" Width="150"/>

    <Button Content="Burron" Width="200"/>

    <Button Content="Burron" Width="150"/>

    <Button Content="Burron" Width="200"/>

    <Button Content="Burron" Width="150"/>

    <Button Content="Burron" Width="200"/>

    <Button Content="Burron" Width="150"/>

</WrapPanel>

在这里插入图片描述
运行程序，拖动窗体边缘改变窗体宽度，发现布局会变成如下所示：

在这里插入图片描述
注意WrapPanel的两个属性：

ItemHeight——所有子元素都一致的高度，任何比ItemHeight高的元素都将被截断。

ItemWidth——所有子元素都一致的宽度，任何比ItemWidth高的元素都将被截断。

示例：

<WrapPanel Orientation="Horizontal" ItemWidth="120">

    <Button Content="Burron" Width="150"/>

    <Button Content="Burron" Width="200"/>

    <Button Content="Burron" Width="150"/>

    <Button Content="Burron" Width="200"/>

    <Button Content="Burron" Width="150"/>

    <Button Content="Burron" Width="200"/>

    <Button Content="Burron" Width="150"/>

</WrapPanel>

显示：
在这里插入图片描述
3、DockPanel:DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非****DockPanel的LastChildFill属性为false，它将朝某个方向停靠。此属性常被用来进行对页面的自适应进行内容填充（当然自适应还有其他条件，自适应高，宽，不建议在页面布局中进行使用固定高宽，可以使用margin，除非特殊情况使用固定高宽）

示例：

<DockPanel>

    <Button Content="Button左" DockPanel.Dock="Left"/>

    <Button Content="Button右" DockPanel.Dock="Right"/>

    <Button Content="Button上" DockPanel.Dock="Top"/>

    <Button Content="Button下" DockPanel.Dock="Bottom"/>

</DockPanel>

显示：
在这里插入图片描述
设置LastChildFill属性为false
示例：

<DockPanel LastChildFill="False">

    <Button Content="Button左" DockPanel.Dock="Left"/>

    <Button Content="Button右" DockPanel.Dock="Right"/>

    <Button Content="Button上" DockPanel.Dock="Top"/>

    <Button Content="Button下" DockPanel.Dock="Bottom"/>

</DockPanel>

显示：
在这里插入图片描述
4、Canvas:Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置.。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。Canvas起点为其左上角位置，允许位置越界，默认不会裁剪边界元素。Canvas一般适用于人员定位，实时页面定位的项目中，一般的UI嵌套不怎么使用，此处不多描述。
在这里插入图片描述

5、Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table页面。在传统的WPF中有 ListView网格布局模式，但是无法满足复杂多变的页面形式，它是自上而下的，如果需求是自左向右呢？该如何进行，再加上表格的多重嵌套合并呢，此时，当然只是单纯的UI布局，个人认为Grid是最好的选择，它虽然复杂，但是可满足一切多变的性能，万物不离网格设计！
传统的listView：
在这里插入图片描述
新需求的页面：

当然以上所述只是个人观点和一些初学的浅薄认知，如果不对，欢迎各位指正。

页面布局总结：

 一般页面的布局最外层，如果是内嵌比较多的，并不是单纯的堆放式或者是流式布局，个人建议使用DockPanel，因为它可以对页面进行自我停靠式布局，这样最外层大的方向有了，里面再进行进一步思考，对应的子模块，该用流式就流式该用堆放式就堆放式布局。但是不管用什么，切记不要固定对应的高或者宽，切记！
 在自己进行页面布局时，遇到一个页面超过当前页面的高度的滚动式问题，使用了ScrollViewer标签进行设置：代码如下：
 <ScrollViewer x:Name="scrolls" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" DockPanel.Dock="Right">
        <ScrollViewer.Content >

</ScrollViewer.Content>

但是ScrollViewer.Content内部只能嵌套一个布局，此时如果有多个外面需要进行放置一个大的页面布局，把它们包含进去。
正常的listView页面布局，就不多进行表述，因为网上例子太多了。