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保持当前内容大小不变。

转载于:https://www.cnblogs.com/ryuu/archive/2012/05/25/2517796.html