---

前言

Wpf布局之StackPanel！

---

一、引言

StackPanel面板在水平或垂直的堆棧中放置元素。這個布局容器通常用于更大、更復雜窗口中的一些區域。

二、使用步驟

StackPanel默認是垂直堆疊

<Grid><StackPanel><Button Height="100" Width="100" Content="按鈕1"/><Button Height="100" Width="100" Content="按鈕2"/><Button Height="100" Width="100" Content="按鈕3"/></StackPanel>
</Grid>

效果圖

可以將Orientation屬性設置為Horizontal，就可以變成水平堆疊

<Grid><StackPanel Orientation="Horizontal"><Button Height="100" Width="100" Content="按鈕1"/><Button Height="100" Width="100" Content="按鈕2"/><Button Height="100" Width="100" Content="按鈕3"/></StackPanel>
</Grid>

效果如圖

上面的按鈕都是緊挨在一起的，如果想要讓按鈕之間留點縫隙，可以使用Margin屬性，當Margin屬性的值設置為一個代表著為所有的邊都設置相同的寬度。

<Grid><StackPanel Orientation="Horizontal"><Button Margin="10" Height="100" Width="100" Content="按鈕1"/><Button Margin="10" Height="100" Width="100" Content="按鈕2"/><Button Margin="10" Height="100" Width="100" Content="按鈕3"/></StackPanel>
</Grid>

效果圖

也可以為每條邊單獨設置一個值，值設置的順序是從左開始順時針，即左、上、右、下。

<Grid><StackPanel Orientation="Horizontal"><Button Margin="5,10,15,20" Height="100" Width="100" Content="按鈕1"/><Button Height="100" Width="100" Content="按鈕2"/><Button Height="100" Width="100" Content="按鈕3"/></StackPanel>
</Grid>

效果圖

也可以只為左右設置相同的值或者上下設置相同的值。下面代碼中Margin=“5,15”，代表著左右值邊距都設置為5，上下邊距都設置為15。

<Grid><StackPanel Orientation="Horizontal"><Button Margin="5,15" Height="100" Width="100" Content="按鈕1"/><Button Height="100" Width="100" Content="按鈕2"/><Button Height="100" Width="100" Content="按鈕3"/></StackPanel>
</Grid>

效果圖