C#编程之布局Grid StackPanel DockPanel WrapPanel应用

这一章我们先讲解一下面板布局的一些基础知识,这为之后的三维设计有很好的帮助。

  1. StackPanel
  2. DockPanel
  3. WrapPanel

首先我们先看说一下Gird的行(Row)与列(Column),看如下代码:

       
            "30"/>
            "auto"/>
        

行高度设置行1=30,行2高度为自动,效果:

C#编程之布局Grid StackPanel DockPanel WrapPanel应用_第1张图片

当修改为  "*"/> 填充剩余区域,效果:

C#编程之布局Grid StackPanel DockPanel WrapPanel应用_第2张图片

由此同样可以理解列(column)的属性设置了

      
            
            
        

修改宽度,同样有三种方法,实际参数值,“auto”自适填充,“*”填充剩余区域

            "180"/>
            "auto"/>
            "*"/>

那么如果我们想在某一行合并多列,该如何实现呢? 这里就要用到跨越属性参数了: Grid.ColumnSpan="N"  N代表跨越(合并)列数,例如要合从第一列开始合并第二列:

 Grid.Column="1" Grid.ColumnSpan="2" 

效果:

从第一列开始合并到第三列: Grid.Column="1" Grid.ColumnSpan="3" 

效果:

同样的原理,对于行的操作也是如此:

 Grid.RowSpan="N"  N代表合并行数。

那么接下来,我们想在某一位置放置多个控件,该如何处理呢?这里就要用到StackPanel

        "5" Grid.Column="0">
            .....
        

该容器可以设定控件布局是垂直方向或水平方向,例如垂直方向放置控件:

        "5" Grid.Column="0">
            "Vertical" VerticalAlignment="Center">
                
        

同理水平放置控件:

        
        "5" Grid.Column="1">
            "Horizontal" HorizontalAlignment="Stretch">
                
        

效果:

C#编程之布局Grid StackPanel DockPanel WrapPanel应用_第3张图片

另外可以进行排序布局设置: Orientation="Horizontal" HorizontalAlignment="Left" FlowDirection="LeftToRight" 

接着我们说一下 DockPanel  自适应窗口布局的停靠容器,先看如下例程:

 1         "2" Grid.Row="5">
 2             "Right" Orientation="Vertical">
 3                 "Title1" Foreground="White" Height="auto">
 4                     "Vertical" FlowDirection="RightToLeft">
 5                         
 8                 
 9                 "Tile2" Foreground="White" Height="auto">
10                     "Vertical" FlowDirection="LeftToRight">
11                         
14                 
15             
16         

效果:

C#编程之布局Grid StackPanel DockPanel WrapPanel应用_第4张图片

在第二列,第五行添加一个容器,该容器内列表装入两个组盒器,并在组盒器内添加控件。由例子可以看出 DockPanel 容器适合整体布局。

 

最后我们说一下具有自动换行功能的WrapPanel容器:

       "5" Grid.Column="3">
            "Horizontal">
                
        

效果:

End.

谢谢.

你可能感兴趣的:(C#编程之布局Grid StackPanel DockPanel WrapPanel应用)