WPF的幾種布局方式

1、StackPanel:顧名思義 堆棧面板，通過Orientation屬性設置子元素的布局排列方向為“Vertical”（垂直）和“Horizontal”（水平），不寫其默認值為“Vertical”，當設置為“Vertical”時子元素會沿水平方向拉伸，反之設置為“Horizontal”時子元素會沿垂直方向拉伸。

<StackPanel>
        <Button Content="button1"></Button>
        <Button Content="button2"></Button>
        <Button Content="button3"></Button>
        <Button Content="button4"></Button>
    </StackPanel>

效果圖：

<StackPanel Orientation="Horizontal">
        <Button Content="button1"></Button>
        <Button Content="button2"></Button>
        <Button Content="button3"></Button>
        <Button Content="button4"></Button>
    </StackPanel>

 

 效果圖：

 

2、DockPanel：支持子元素停靠在面板的任意一條邊上，通過附加屬性Dock控制他們的停靠位置（Left、Top、Right、Bottom），填充空間按照“先到先得”的原則，最后一個加入面板的子元素將填滿剩下的空間，如不想將最后加入面板的元素填滿剩下的空間將屬性LastChildFill值設為“False”，默認為“True”。

 <DockPanel >
        <Button Content="button1" DockPanel.Dock="Top" Background="Aqua"></Button>
        <Button Content="button2" DockPanel.Dock="Left" Background="Blue"></Button>
        <Button Content="button3" DockPanel.Dock="Bottom" Background="Crimson"></Button>
        <Button Content="button4" DockPanel.Dock="Right" Background="Gold"></Button>
        <Button Content="button5" Background="GreenYellow"></Button>
    </DockPanel>

效果圖：

<DockPanel LastChildFill="False">
        <Button Content="button1" DockPanel.Dock="Top" Background="Aqua"></Button>
        <Button Content="button2" DockPanel.Dock="Left" Background="Blue"></Button>
        <Button Content="button3" DockPanel.Dock="Bottom" Background="Crimson"></Button>
        <Button Content="button4" DockPanel.Dock="Right" Background="Gold"></Button>
        <Button Content="button5" Background="GreenYellow"></Button>
    </DockPanel>

效果圖：

 

3、WrapPanel：可換行面板與StackPanel相似，通過Orientation屬性設置子元素的排列順序，從左至右按順序位置定位子元素，當前行無法放下元素時斷開至下一行，或者排序按照從上至下或從右至左的順序進行，通過ItemHeight可以設置當前面板中所有子元素的高度，當然也有ItemWidth設置所有子元素的寬度。

 <WrapPanel Orientation="Horizontal" ItemHeight="50" ItemWidth="80" >
        <Button Content="button1" Background="Aqua"></Button>
        <Button Content="button2" Background="Blue"></Button>
        <Button Content="button3" Background="Crimson"></Button>
        <Button Content="button4" Background="Gold"></Button>
        <Button Content="button5" Background="GreenYellow"></Button>
        <Button Content="button1" Background="Aqua"></Button>
        <Button Content="button2" Background="Blue"></Button>
        <Button Content="button3" Background="Crimson"></Button>
        <Button Content="button4" Background="Gold"></Button>
        <Button Content="button5" Background="GreenYellow"></Button>
        <Button Content="button1" Background="Aqua"></Button>
        <Button Content="button2" Background="Blue"></Button>
        <Button Content="button3" Background="Crimson"></Button>
        <Button Content="button4" Background="Gold"></Button>
        <Button Content="button5" Background="GreenYellow"></Button>
        
    </WrapPanel>

效果圖：

 ps：如有寫錯或描述的不清楚的地方歡迎指正或補充。