1、布局容器Grid、StackPanel、GroupBox、DockPanel、WrapPanel

Grid——網格布局，其中控件或容器需指定位置

StackPanel——堆疊面板，其中的控件水平布局、豎直布局

DockPanel——停靠面板，內部控件或容器可以放置在上、下、左、右

WrapPanel——可以看作是具有自動換行功能的StackPanel容器。窗體太小時，其末尾的控件會自動換行。像Java中的流布局

布局原則：先整體規划（Grid），再局部規划（Grid、StackPanel等）

如下圖，Grid有5行3列，具體布局、控件查看文檔大綱

 

xaml代碼

<Window x:Class="DemoWPF61.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DemoWPF61"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="350">
    <Grid >
        <!--行定義，5行-->
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="30"/>
            <!--剩余高度-->
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <!--列定義，3列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <!--網格的2,3兩列放置StackPanel-->
        <Grid Grid.Column="1" Grid.ColumnSpan="2">
            <!--水平布局，右對齊-->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <!--方式1-->
                <Button Content="夕西行" Margin="5,0,0,0"/>
                <!--方式2-->
                <Button Margin="5,0,5,0">我的博客</Button>
            </StackPanel>
        </Grid>
        <!--網格的1列2行放置Image，默認居中對齊-->
        <Grid Grid.Column="0" Grid.Row="1">
            <Image Source="C:/Users/Jv/Desktop/lena512.tiff"/>
        </Grid>
        <!--網格的1~3列放置StackPanel-->
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2">
            <!--水平布局，默認左對齊-->
            <StackPanel Orientation="Horizontal">
                <Button Margin="5,0,0,0">園子</Button>
                <Button Margin="5,0,0,0">新聞</Button>
                <Button Margin="5,0,0,0">博問</Button>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">
            <!--左右居中，上下居中-->
            <Label Content="第4行，占三列" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="4">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5,0,0,0">關於我們</Button>
                <Button Margin="5,0,0,0">聯系我們</Button>
                <Button Margin="5,0,0,0">廣告服務</Button>
                <Button Margin="5,0,0,0">人才服務</Button>
                <Button Margin="5,0,0,0">版權</Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

【GroupBox】GroupBox內只能有一個元素，可用StackPanel承載多個控件

布局、控件如圖所示 

  

<Window x:Class="DemoWPF61.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DemoWPF61"
        mc:Ignorable="d"
        Title="MainWindow" Height="190" Width="200">
    <!--StackPanel縱向布局，縱向對齊方式：底對齊-->
    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" >
        <!--GroupBox內只能有一個元素，StackPanel來承載更多的控件-->
        <GroupBox Header="網站分類">
            <!--StackPanel內，縱向布局-->
            <StackPanel Orientation="Vertical">
                <Button Content=".NET技術(16)"/>
                <Button Content="編程語言(13)"/>
            </StackPanel>
        </GroupBox>
        <GroupBox Header="鏈接">
            <StackPanel Orientation="Vertical">
                <Button Content="反饋和建議"/>
                <Button Content="官方博客"/>
            </StackPanel>
        </GroupBox>
    </StackPanel>
</Window>

 【DockPanel】

  

<Window x:Class="DemoWPF61.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DemoWPF61"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="230">
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" >
            <Label Content="StackPanel停靠在DockPanel的上邊"/>
        </StackPanel>
        <StackPanel DockPanel.Dock="Bottom" Height="20">
        </StackPanel>
        <StackPanel DockPanel.Dock="Left" Width="30">
        </StackPanel>
        <StackPanel DockPanel.Dock="Right" Width="30"/>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Label Content=" 中間地帶，是我的天下" />
        </StackPanel>
    </DockPanel>
</Window>

 【WrapPanel】可以看作是具有自動換行功能的StackPanel容器。默認從左到右排列。

   

左圖最后一個Button的高度會變成最小尺寸。Orientation="Vertical"得到右圖（默認水平布局）

<Window x:Class="DemoWPF61.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DemoWPF61"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="209.199">
    <WrapPanel Margin="3">
        <Button Content="Top" VerticalAlignment="Top"/>
        <Button Content="Bottom" VerticalAlignment="Bottom"/>
        <Button Content="靠我撐大" MinHeight="40"/>
        <Button Content="Center" VerticalAlignment="Center"/>
        <Button Content="無對齊方式"/>
    </WrapPanel>
</Window>