WPF -- 布局面板

Grid

• Grid 是一个二维表格布局，可以将子元素放置在任何单元格内。
• Grid 可以设置行和列的大小和比例。
• Grid 是最灵活的布局面板，在需要精确控制子元素位置时使用它。

StackPanel

• StackPanel 是一个线性布局，可以沿着水平或垂直方向排列子元素。
• StackPanel 的所有子元素都放置在同一行或同一列上。
• StackPanel 很适合当你只需要简单地从上到下或从左到右排列元素时使用。

Canvas

• Canvas 是一个允许你自由定位子元素的面板，使用绝对坐标来指定子元素的位置。
• 子元素相对于 Canvas 控件的左上角定位。
• Canvas 适用于需要完全控制子元素位置和大小的情况。

DockPanel

• DockPanel 允许你把子元素固定在容器的边缘，使它们填充所有可用空间。
• 如果多个子元素被分配到同一边，则它们按照添加的顺序堆叠。
• DockPanel 适用于创建具有固定头部、底部或侧边栏的应用程序。

WrapPanel

• WrapPanel 是一个流式布局，可以自动换行，并在下一行开始放置子元素。
• WrapPanel 优化了屏幕上可显示的空间，适合于需要显示大量数据的情况。
• WrapPanel 很适用于要在水平方向或垂直方向上滚动并且需要自动调整大小以适应不同窗口大小。

以下是一个使用 Grid, StackPanel, Canvas, DockPanel 和 WrapPanel 的案例： 

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><TextBlock Text="Header" Grid.Row="0"/><DockPanel LastChildFill="True" Grid.Row="1"><StackPanel Orientation="Vertical" DockPanel.Dock="Left"><Button Content="Button 1"/><Button Content="Button 2"/><Button Content="Button 3"/></StackPanel><Canvas DockPanel.Dock="Top"><Ellipse Fill="Red" Height="100" Width="100" Canvas.Left="50" Canvas.Top="50"/><Rectangle Fill="Blue" Height="100" Width="100" Canvas.Left="150" Canvas.Top="50"/><Polygon Fill="Green" Points="75,0 150,100 0,100" Canvas.Left="250" Canvas.Top="50"/></Canvas><WrapPanel DockPanel.Dock="Right"><Button Content="Button 4"/><Button Content="Button 5"/><Button Content="Button 6"/></WrapPanel><TextBlock Text="Center" /></DockPanel>
</Grid>

这个案例包含一个带有标题的网格，其中一行用于显示标题，另一行填充了 DockPanel。在 DockPanel 中，使用 StackPanel 将按钮垂直对齐并放置在左侧，使用 Canvas 在顶部放置几何图形，并使用 WrapPanel 将其他按钮水平对齐并放置在右侧。DockPanel 中心区域放置了一个文本块。 

中国机械库