一、Grid 容器 —— 表格布局Grid 就像一张表格你可以自由定义有多少行、多少列然后把子元素放到指定的格子里。用RowDefinition定义行用ColumnDefinition定义列子元素通过Grid.Row和Grid.Column属性指定放在哪一行哪一列Grid Grid.RowDefinitions RowDefinition Height*/ RowDefinition Height*/ /Grid.RowDefinitions Grid.ColumnDefinitions ColumnDefinition Width*/ ColumnDefinition Width*/ /Grid.ColumnDefinitions Button Content左上 Grid.Row0 Grid.Column0/ Button Content右下 Grid.Row1 Grid.Column1/ /Grid二、StackPanel 容器 —— 顺序排列StackPanel 会把子元素一个接一个地排列默认是垂直方向从上到下。设置OrientationHorizontal可以改为水平排列从左到右子元素不会自动换行超出范围就看不到了StackPanel OrientationVertical Button Content按钮1/ Button Content按钮2/ Button Content按钮3/ /StackPanel三、WrapPanel 容器 —— 自动换行WrapPanel 和 StackPanel 类似也是按顺序排列子元素默认是水平方向。但它的独特之处在于空间不够时会自动换行或换列。默认水平排列放不下了自动换到下一行设置OrientationVertical则垂直排列放不下了自动换到下一列WrapPanel Button Content标签1/ Button Content标签2/ Button Content标签3/ Button Content标签4/ /WrapPanel四、DockPanel 容器 —— 停靠布局DockPanel 允许你把子元素停靠到容器的上、下、左、右四个方向最后一个子元素会自动填满剩余空间。通过DockPanel.Dock属性指定停靠方向Top、Bottom、Left、Right最后一个子元素或设置LastChildFillTrue时会占据中间剩余区域DockPanel Button Content顶部 DockPanel.DockTop/ Button Content左侧 DockPanel.DockLeft/ Button Content底部 DockPanel.DockBottom/ Button Content中间自动填满/ /DockPanel五、UniformGrid 容器 —— 均匀网格UniformGrid 会把所有子元素放进一个行列大小完全相同的网格中。你只需要指定有几行几列它会自动均分空间。通过Rows和Columns属性指定行列数如果只指定其中一个另一个会自动计算每个格子的大小完全一样UniformGrid Rows2 Columns3 Button Content1/ Button Content2/ Button Content3/ Button Content4/ Button Content5/ Button Content6/ /UniformGrid六、Margin 属性 —— 外边距用来设置元素与周围元素或容器边缘之间的间距。它的写法有以下几种写法含义Margin10上下左右都是 10Margin10,20左右 10上下 20Margin10,20,30,40左 10、上 20、右 30、下 40顺时针Button Content按钮 Margin10,5,10,5/对比容器排列方式核心特点Grid自定义行列最灵活适合复杂布局StackPanel单方向顺序排列简单线性不换行WrapPanel顺序排列 自动换行空间不足时自动折行DockPanel上下左右停靠适合经典窗口布局UniformGrid均匀网格所有格子大小一致七、对比Grid 中 Row/Column 的三种尺寸单位在 Grid 容器中RowDefinition的Height和ColumnDefinition的Width支持三种赋值方式。固定像素值如100直接指定一个固定的像素大小不管窗口怎么拉伸这一行/列的大小始终不变。RowDefinition Height100/优点精确可控缺点窗口放大缩小时不会自适应可能导致空间浪费或内容溢出适用场景顶部标题栏、底部状态栏等高度固定的区域Auto自动适应内容行/列的高度或宽度会自动根据内部子元素的大小来调整子元素多大它就多大。RowDefinition HeightAuto/优点内容多高就多高不会浪费空间缺点如果内容本身大小不固定可能导致布局不稳定适用场景搜索框、按钮行等高度由内容决定的区域星号*比例分配剩余空间*表示把剩余的空间按比例分配。这是 Grid 最强大也最容易踩坑的地方。RowDefinition Height*/ RowDefinition Height2*/上面的写法表示第一行占剩余空间的1 份第二行占剩余空间的2 份也就是说第二行的高度是第一行的2 倍如果三行都写Height*那就是三等分。优点窗口拉伸时自动按比例缩放自适应能力最强缺点如果内容超出分配的空间可能会被截断需要配合ScrollViewer使用适用场景主内容区域、需要自适应拉伸的布局实际开发中最常见的写法就是三者结合单位含义窗口拉伸时100固定像素固定大小不变Auto由子元素内容撑开随内容变化*/2*按比例分配剩余空间按比例缩放