WPF基础系列一：常用的布局容器

• 常用的布局容器
• 前言
• 一、总览
• 二、布局容器简介
• • 1. Grid
  • 2. StackPanel
  • 3. WrapPanel
  • 4. DockPanel
  • 5. Canvas
  • 6. UniformGrid

• Grid——网格布局，其中控件或容器需指定位置；
• StackPanel——堆叠面板，其中的控件水平布局、竖直布局；
• DockPanel——停靠面板，内部控件或容器可以放置在上、下、左、右；
• WrapPanel——可以看作是具有自动换行功能的StackPanel容器。窗体太小时，其末尾的控件会自动换行，像Java中的流布局；
• Canvas——坐标布局，基于坐标的布局，利用Canvas.Left,Canvas.Top,Canvas.Right,Canvas.Bottom这四个附加属性来定位控件坐标；
• UniformGrid——指定行和列的数量, 均分有限的容器空间。

      布局原则：先整体规划（Grid），再局部规划（Grid、StackPanel等）

       在WPF中可以说最强大的布局容器就是Grid了，StackPanel、WrapPanel、Grid等容器都可以放置在Grid中，因为Grid可以模仿除了WrapPanel之外的所有布局容器的功能。

• Grid其实就是把一个页面分为一格格，然后再这些格上面放东西；

• 在布局控件之前，我们首先要做的是布局Grid容器，因为Grid容器是由小网格组成，那么我们在布局容器的时候就要设置好有多少行，有多少列。然后就形成了用这些行和列分隔开的网格了。

       我们用标签来定义列的，用来定义行的。上图我们定义的5*5的Grid布局容器。注意，默认情况下是平均分，但是有很多情况不是平均分的，我们可以设置高度或者宽度的值,有三种方式.我们利用列来说明：

1. Width="*"，这种是按比例分的，2*就是2倍的意思了；
2. Width="auto"自动分配，就是根据内容分配空间；
3. Width="Value"一个确定的值。这个属性可以这样写

       定义Grid的行和列以后，网格就出来了就可以再里面放内容了。我们通过Grid.Row和Grid.Column来把空间放进去。当然，我们也可以在容器里面的空间标签中加入各种属性来改变一些东西，如Margin，当我们不想看到分割线的话，也可以设置ShowGridLines=false来取消。我们可以再方格里面镶嵌一个布局容器，在里面继续布局。

       在WPF中StackPanel的功能是，紧凑地把子控件按照一定规律地排列在一起，基本的排列方式有两种，一种是横排列，一种是竖排列。下面看一下这个布局容器的使用。

     这里随便说一下Margin属性，Margin属性定义控件的外边缘，可以通过以下几种方式来设置：

1. Margin=”10”：各边缘均为10；
2. Margin=”10,20,30,40”：设定左、上、右、下各边缘分别为10、20、30、40；
3. 使用拆分式方式设定Margin=”20,10”，如上下为10，左右为20

       StackPanel是比较有局限性的，WarpPanel和DockPanel就是补充StackPanel功能的布局容器，WarpPanel是可以根据容器的大小变化，来滚动控件的排布的。而StackPanel只是死死地盯住控件，容器小了，就会遮挡内容。

       DockPanel布局容器是以上、下、左、右、中为基本结构的布局方式，主要是控件的停靠方式。有类似于港口停船的方式。我们可以利用DockPanel.Dock这个附加属性来设置控件的停泊方式的。有四个方式，上下左右。

       Canvas布局容器就好像传统的布局一样，基于坐标的布局，利用Canvas.Left,Canvas.Top,Canvas.Right,Canvas.Bottom这四个附加属性来定位控件坐标。WPF中使用的坐标是以左上角为原点，向右为X轴，向下为Y轴的，坐标点就是控件的左上角的位置。

       UniformGrid布局容器，均分单元格，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。

    
        
            第一个(0,0)
            第二个(0,1) 
            第三个(1,0) 
            第四个(1,1) 
        
    

参考来源：
链接: StackPanel,WarpPanel,DockPanel,Grid,Canvas布局容器；
链接: WPF的布局容器