Windows 8 風格應用開發入門：版面配置控件 Canvas、Grid、StackPanel

Panel 類別是版面配置系統的核心，三大標準配置控件 Canvas、Grid、StackPanel 涵蓋絕大多數佈局需求。

Panel 階層架構

Canvas：絕對定位佈局

以左上角為原點，透過 Canvas.Left、Canvas.Top 附加屬性精確定位子元素。適合向量圖形、遊戲場景、自由形式佈局。

XAML 宣告

<Canvas>
    <Rectangle Fill="Red" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50"/>
    <Ellipse Fill="Blue" Width="80" Height="80" Canvas.Left="200" Canvas.Top="100"/>
</Canvas>

程式碼動態設定

var btn = new Button { Content = "動態按鈕" };
canvas.Children.Add(btn);
Canvas.SetLeft(btn, 100);
Canvas.SetTop(btn, 150);

Z-Index 層級控制

Canvas.ZIndex 控制重疊順序，數值大者覆蓋數值小者。同層級依 Children 集合順序疊放。此附加屬性適用於所有 Panel 衍生類別。

Grid：彈性網格佈局

最常用、最靈活的佈局控件。定義 RowDefinitions、ColumnDefinitions，子元素透過 Grid.Row、Grid.Column 定位。支援三種尺寸模式：

• Auto：依內容尺寸
• 固定像素：如 100
• 星號比例：如 *、2*（按比例分配剩餘空間）

完整範例

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <TextBlock Text="標題" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
    <ListView Grid.Row="1" Grid.Column="0"/>
    <ContentControl Grid.Row="1" Grid.Column="1"/>
    <Button Content="底部" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>
</Grid>

巢狀 Grid 注意事項

• 巢狀常見但避免過度複雜
• 頻繁重新佈局時效能影響較大
• 優先考慮單層 Grid 搭配星號比例

StackPanel：堆疊佈局

子元素依序垂直或水平排列，不重疊。Orientation 屬性控制方向：

• Vertical（預設）：自上而下
• Horizontal：自左而右

XAML 設定方向

<StackPanel Orientation="Horizontal">
    <Button Content="按鈕 1"/>
    <Button Content="按鈕 2"/>
    <Button Content="按鈕 3"/>
</StackPanel>

程式碼設定方向

stackPanel.Orientation = Orientation.Horizontal;

選擇指南

掌握三大佈局控件是構建靈活 UI 的基礎。下一章將介紹基礎輸入控件：ProgressRing、ProgressBar、ToggleSwitch 等。