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页面布局,就不多进行表述,因为网上例子太多了。