WPF 页面布局(Layout with Panel)
这里主要讲述在WPF中一些常用panel的使用方法,从而理解页面的布局原理:
一、Canvas(不太常用)
是最基本的布局面板,仅仅支持显示坐标定位(是与设备无关的像素)元素。
他是通过设置到面板的上下左右的像素来控制在panel中元素的位置。
如控制一个button的位置:我们可以设置附加属性:Canvas.Top="" Canvas.Left="".....从而来定位元素,
但是值得注意的是如果我们同时设置两个相对的属性如Canvas.Left="" Canvas.Right="" 这样的话Canvas.Right就会被忽略,如果不这样的话又怎么显示呢
这个容器能够对元素做准确的定位,但同时也是其创建的页面不够灵活。
二、StackPanel
最大的优点是:他会顺序的对他的子元素进行排列显示。(没有任何附加属性)
要注意的是:他有两个属性:Orientation和FlowDirection从而可以设置子元素的排列显示形式
Orientation的值设为Horizontal则为水平排列,设为Vertical则垂直排列。
FlowDirection的值设为RightToLeft,则从右向左排列。设为LeftToRight,则从左向右排列。
三、WrapPanel
类似于StackPanel,具有StackPanel的属性和功能(也具有FlowDirection属性的设置)。
同时,它还具有向我们通常用的windows资源管理器一样,会随着窗口的大小,从而将子元素进行合理的分行显示,而不会出现因为窗口变小从而是一些子元素无法显示。
四、DockPanel
与Cavas相似的是,他也是从容器的边缘来定位子元素的位置。不同的是,它只能让子元素简简单单的停靠在容器边缘,然后拉伸来填充整个panel,
他会根据子元素出现的先后顺序来填充他所能填充的空间。通过设置子元素的附加属性:DockPanel.Dock 的值:Top,Left,Right,Buttom,从而实现控制子元素显示的结果。
这个控件常用于布局windows和page,如包括菜单,状态栏,隐藏的面板等布局,(Visual studio 集成开发工具)
五、Grid(最常用)
类似于HTML中的Table
1、通过<Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition Height="2*"></RowDefinition> <RowDefinition Height="3*"></RowDefinition> <RowDefinition Height="4*"></RowDefinition> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions>类似于以上的语法来为Grid添加行和列。
2、每个单元格可以设置为空,也可以放多个元素。
3、RowSpan和ColumnSpan来设置单元格的跨行跨列属性。
4、行和列的高度和宽度的设置:auto:自动尺寸监控
(像素):绝对尺寸
(带“*”的数字)比例尺寸
5、GridSplitter
将GridSplitter放到一个一个单元格中可以通过鼠标改变该单元格的大小:
它的两个属性:设置为VerticalAlignment="Bottom" HorizontalAlignment="Stretch"时,就会在单元格的下方显示可以改变单元格的高度。
VerticalAlignment="Stretch" HorizontalAlignment="Right" 就会改变单元格的宽度。
值得注意的是:水平方向和垂直方向有一个的值必须设为Stretch,否则的话是一个小点,就无法实现其功能。
GridSplitter必须有一个显示的Width和Height这样才能看到,并且启到作用。
6、共享行和列的尺寸。
ColumnDefinition 和RowDefinition都有一个共同的属性:SharedSizeGroup 它的值是一个自定义的值,这样被标记的具有同样值的行和列就会一直有相同的呈现形式,其中的一个改变,另一个也会改变。
但值得注意的是在使用这个属性的时候,要将grid的共享开启: <Grid Name="parentGrid" Grid.IsSharedSizeScope="True">....</Grid>
六、处理内容溢出
1、剪切(clipping)
大部分面板都有一个Boolean的属性ClipToBounds并且它们的值都设为true,所以只要是溢出面板的都会被剪切掉
只有 Canvas面板的这个属性可以设置,并且ClipToBounds的值默认是false。
2、滚屏(scrolling)
只需将所有的元素(或面板)放入到一个<ScrollViewer >.....</ScrollViewer>内即可。他有属性:VerticalScrollBarVisibility(默认值Visible)和HorizontalScrollBarVisibility(默认值Auto)可以设置他们的值:Visible,Hidden,Auto,Disabled
3、缩放(scaling)
将内容放置到<Viewbox>...</Viewbox>之内即可实现缩放。
属性Stretch:值
Uniform(默认):显示整个元素到窗体的空间上,会随着窗体的大小而自动缩放,(但是某个方向上可能因为比例不合适而无法填充剩余空间)
UniformToFill:在保存外观比例同时缩放子元素来完全填充viewbox内的空间(但是某个方向上可能因为比例不合适而要截断部分显示)
None:不进行缩放,与不用viewbox没什么区别。
Fill:显示子元素到viewbox中,各个方向都要拉伸以填充所有空间。
属性StretchDirection值
Both(默认)扩大或缩小内容。DownOnly:如果合适缩小内容。如果内容足够小,viewbox保持当前内容大小不变。UpOnly:如果合适扩大内容,如果内容足够大,Viewbox保持当前内容大小不变。