在WPF開發中，布局控件是構建用戶界面的基石。StackPanel和DockPanel作為兩種最基礎的布局容器，能幫助開發者快速實現常見的界面結構。本章將通過具體場景演示它們的核心用法，并揭示布局控件的設計哲學。

1 StackPanel的Orientation屬性

StackPanel以單行/單列方式排列子元素，其核心特性由Orientation屬性控制：

垂直排列（默認模式）

<!-- 模擬手機應用列表 -->
<StackPanel Margin="10"><Button Content="微信" Height="40"/><Button Content="支付寶" Height="40"/><Button Content="抖音" Height="40"/><Button Content="釘釘" Height="40"/>
</StackPanel>

垂直StackPanel示意圖

水平排列

<!-- 創建工具欄 -->
<StackPanel Orientation="Horizontal" Background="#EEE"><Button Content="新建" Width="60"/><Button Content="打開" Width="60"/><Button Content="保存" Width="60"/><Separator Width="20"/><Button Content="撤銷" Width="60"/><Button Content="重做" Width="60"/>
</StackPanel>

水平StackPanel示意圖

實戰技巧：

1. 當子元素尺寸超出容器時，可使用ScrollViewer包裹
2. 組合Margin和Padding優化間距
3. 通過HorizontalAlignment/VerticalAlignment控制整體對齊

<!-- 帶滾動條的商品列表 -->
<ScrollViewer VerticalScrollBarVisibility="Auto"><StackPanel Orientation="Vertical" Margin="5"><!-- 動態生成商品項 --></StackPanel>
</ScrollViewer>

2 DockPanel的LastChildFill

DockPanel通過DockPanel.Dock附加屬性實現停靠布局，其LastChildFill屬性決定最后子元素是否填充剩余空間：

基礎停靠示例

<DockPanel LastChildFill="True"><!-- 頂部菜單欄 --><Menu DockPanel.Dock="Top" Background="LightGray"><MenuItem Header="文件"/><MenuItem Header="編輯"/></Menu><!-- 左側導航欄 --><ListBox DockPanel.Dock="Left" Width="150"><ListBoxItem Content="收件箱"/><ListBoxItem Content="已發送"/></ListBox><!-- 底部狀態欄 --><StatusBar DockPanel.Dock="Bottom"><StatusBarItem Content="就緒"/></StatusBar><!-- 主內容區（自動填充剩余空間） --><TextBox AcceptsReturn="True"/>
</DockPanel>

LastChildFill對比實驗

設置值	效果說明
True	最后子元素填充剩余區域（默認值）
False	所有子元素按Dock設置精確停靠

<!-- 實現三欄式布局 --><DockPanel LastChildFill="False"><Border Width="200"Height="300"Background="#FFE4E1"DockPanel.Dock="Left" /><Border Width="200"Height="300"Background="#F0FFF0"DockPanel.Dock="Right" /><Border Width="200"Height="100"Background="#E6E6FA"DockPanel.Dock="Top" /></DockPanel>

3 嵌套布局示例

通過組合布局控件可實現復雜界面，以下是典型的多層嵌套案例：

案例：電商商品詳情頁

<DockPanel><!-- 頭部導航欄 --><StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Height="40"><Button Content="返回" Width="80"/><TextBlock Text="商品詳情" VerticalAlignment="Center" FontSize="18"/></StackPanel><!-- 主體內容 --><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="3*"/><ColumnDefinition Width="2*"/></Grid.ColumnDefinitions><!-- 左側圖片區 --><ScrollViewer Grid.Column="0"><StackPanel Orientation="Vertical"><Image Source="main.jpg" Stretch="Uniform"/><WrapPanel><Image Source="thumb1.jpg" Width="100"/><Image Source="thumb2.jpg" Width="100"/></WrapPanel></StackPanel></ScrollViewer><!-- 右側信息區 --><DockPanel Grid.Column="1" Margin="10"><StackPanel DockPanel.Dock="Top"><TextBlock Text="￥199.00" FontSize="24"/><TextBlock Text="庫存：500件" Margin="0,5"/></StackPanel><StackPanel DockPanel.Dock="Bottom"><Button Content="立即購買" Background="#FF4444"/><Button Content="加入購物車" Margin="0,10"/></StackPanel><ScrollViewer><TextBlock TextWrapping="Wrap" Text="{Binding Description}"/></ScrollViewer></DockPanel></Grid>
</DockPanel>

布局分析：

1. 頂層使用DockPanel劃分頭部與主體
2. 主體區采用Grid實現左右分欄
3. 右側信息區再次嵌套DockPanel完成上下布局
4. 在圖片展示區域組合StackPanel和WrapPanel
   

4 性能優化建議

1.避免過度嵌套：超過5層嵌套應考慮重構

2.合理使用布局測量：

// 手動控制布局更新
myStackPanel.InvalidateMeasure();
myStackPanel.UpdateLayout();

3.虛擬化長列表：使用VirtualizingStackPanel

<ListBox VirtualizingPanel.IsVirtualizing="True"/>

4.凍結靜態布局：對不再變化的元素設置

<StackPanel x:Name="fixedPanel" IsLayoutFrozen="True"/>

5 常見問題排查

問題1：元素顯示不全

• 檢查父容器尺寸是否受限
• 確認未在無限尺寸方向上設置固定值（如水平StackPanel中的Width）

問題2：布局錯位

• 使用調試邊框輔助定位

<Border BorderBrush="Red" BorderThickness="1"/>

• 檢查Margin的疊加效應

問題3：性能卡頓

• 使用WPF性能分析工具
• 在復雜布局中啟用緩存

<StackPanel CacheMode="BitmapCache"/>

本章小結
通過本章學習，開發者應掌握：

• StackPanel的單向布局特性及適用場景
• DockPanel的停靠布局邏輯與LastChildFill的微妙影響
• 嵌套布局的設計原則與實現方法
• 布局性能優化的關鍵技巧

建議在Visual Studio中創建以下測試場景：

• 使用純DockPanel實現Visual Studio的界面布局
• 結合StackPanel創建可折疊的導航菜單
• 嘗試在滾動區域內混合使用多種布局控件

下一章將深入講解更強大的Grid布局系統。