一、佈局容器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>