Windows 8 Store Apps 開發實戰（7）：版面配置控件全解析 — Canvas、Grid、StackPanel、虛擬化面板與 VariableSizedWrapGrid

前言

版面配置是 XAML UI 的骨架。WinRT 提供六大核心面板，各有適用場景：Canvas（絕對定位）、Grid（網格彈性）、StackPanel（流式堆疊）、VirtualizingStackPanel（虛擬化堆疊）、WrapGrid（自動換行網格）、VariableSizedWrapGrid（可變尺寸換行）。本文逐一解析語法、屬性與實戰範例。

一、Canvas — 絕對座標定位

子元素透過附加屬性 Canvas.Left、Canvas.Top 指定相對 Canvas 左上角座標。Canvas 不會限制子元素大小，子元素可超出邊界。

<Canvas HorizontalAlignment="Left" VerticalAlignment="Top"
        Background="Red" Width="100" Height="100" Margin="120 0 0 0">
    <Canvas Background="Green" Width="200" Height="200"
            Canvas.Left="120" Canvas.Top="120">
        <TextBlock Text="TextBlock" Canvas.Top="20"/>
    </Canvas>
</Canvas>

💡 適用場景：繪圖板、遊戲場景、自由拖曳元素、座標精確控制的覆蓋層。

二、Grid — 彈性網格佈局王者

透過 RowDefinitions、ColumnDefinitions 定義列/行，子元素用 Grid.Row、Grid.Column、Grid.RowSpan、Grid.ColumnSpan 定位。

尺寸單位三種

• Auto：依內容自適應（預設）
• Pixel：固定像素（如 50）
• Star (*)：比例分配剩餘空間（* 全部、2* 和 8* 為 2:8）

完整範例：混合 Auto/Star/MinMax/Auto

<Grid Background="Blue" Width="300" Height="300" Canvas.ZIndex="100">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>           <!-- 固定 50 -->
        <RowDefinition Height="3*"/>           <!-- 3 份 -->
        <RowDefinition Height="7*"/>           <!-- 7 份 -->
        <RowDefinition Height="*" MinHeight="50" MaxHeight="100"/> <!-- 1 份，限制範圍 -->
        <RowDefinition Height="Auto"/>         <!-- 自適應 -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <TextBox Grid.Row="0" Grid.Column="0" Background="Red" Text="webabcd"/>
    <TextBox Grid.Row="0" Grid.Column="1" Background="Red" Text="webabcd" Grid.ColumnSpan="2" HorizontalAlignment="Center"/>
    <TextBox Grid.Row="1" Grid.Column="0" Background="Red" Text="webabcd"/>
    <TextBox Grid.Row="1" Grid.Column="1" Background="Red" Text="webabcd" Grid.ColumnSpan="2" HorizontalAlignment="Center"/>
    <TextBox Grid.Row="2" Grid.Column="0" Background="Red" Text="webabcd"/>
    <TextBox Grid.Row="2" Grid.Column="1" Background="Red" Text="webabcd" Grid.RowSpan="2" VerticalAlignment="Bottom"/>
    <TextBox Grid.Row="2" Grid.Column="2" Background="Red" Text="webabcd"/>
    <TextBox Grid.Row="3" Grid.Column="2" Background="Red" Text="webabcd"/>
    <TextBox Grid.Row="4" Grid.Column="2" Background="Red" Text="webabcd"/>
</Grid>

<!-- Canvas.ZIndex 可用於任意元素疊序控制 -->
<Rectangle Margin="10 50 100 150" Fill="Green" Canvas.ZIndex="10"/>

關鍵提醒

• Grid 內子元素預設 HorizontalAlignment=Stretch、VerticalAlignment=Stretch
• 子元素定位主要靠 Margin 而非 Canvas 座標
• Canvas.ZIndex 為附加屬性，可用於任何元素控制 Z 軸順序

三、StackPanel — 簡單流式堆疊

Orientation：Horizontal（水平）、Vertical（垂直，預設）。子元素依序排列，不換行。

<StackPanel HorizontalAlignment="Left" Margin="120 0 0 0">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="a" Margin="5"/>
        <TextBlock Text="b" Margin="5"/>
        <TextBlock Text="c" Margin="5"/>
    </StackPanel>
    <StackPanel Orientation="Vertical">
        <TextBlock Text="a" Margin="5"/>
        <TextBlock Text="b" Margin="5"/>
        <TextBlock Text="c" Margin="5"/>
    </StackPanel>
</StackPanel>

💡 適用場景：表單欄位、工具列、簡單垂直/水平列表。

四、VirtualizingStackPanel — 僅限 ItemsControl 的虛擬化堆疊

繼承 VirtualizingPanel，僅建立可視區內的 UI 元素，大幅提升大量資料效能。只能用於 ItemsControl 衍生控件（ListBox、ListView、FlipView 等）的 ItemsPanel，不可直接放入一般頁面。

關鍵屬性

• Orientation：Vertical/Horizontal
• VirtualizationMode：Recycling（容器重用，預設）、Standard（各項目獨立容器）

ListBox 中啟用範例

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Vertical"
                                VirtualizationMode="Recycling"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

⚠️ 注意：ListBox 預設已使用 VirtualizingStackPanel，但對可變高度 DataTemplate 支援較差。

五、WrapGrid — 僅限 ItemsControl 的自動換行網格

繼承 VirtualizingPanel，支援虛擬化。子元素依 Orientation 排列，超出 MaximumRowsOrColumns 自動換行/換列。

關鍵屬性

• Orientation：Vertical（直向排滿換列）、Horizontal（橫向排滿換行）
• MaximumRowsOrColumns：最大行/列數
• ItemWidth/ItemHeight：每個格子尺寸（可選）
• VerticalChildrenAlignment/HorizontalChildrenAlignment：格子內對齊

GridView 中使用範例

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapGrid MaximumRowsOrColumns="3" Orientation="Vertical"
                VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

六、VariableSizedWrapGrid — 可變尺寸換行網格

不繼承 VirtualizingPanel，無虛擬化，適合項目數較少但尺寸多變的場景。支援 ColumnSpan/RowSpan 讓項目跨越多格。

關鍵屬性

• Orientation：Horizontal/Vertical
• ItemWidth/ItemHeight：基礎格子尺寸
• MaximumRowsOrColumns：最大行/列數
• 子元素設定附加屬性：VariableSizedWrapGrid.ColumnSpan、RowSpan

直接在頁面使用範例

<VariableSizedWrapGrid Orientation="Horizontal" HorizontalAlignment="Left"
                       Background="Green" Width="1000" Margin="0 10 0 0">
    <VariableSizedWrapGrid.Children>
        <Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"/>
        <!-- 重複 15 個 -->
    </VariableSizedWrapGrid.Children>
</VariableSizedWrapGrid>

配合 GridView 實現可變項目尺寸（詳見第 12 篇）

1. ItemsPanel 使用 VariableSizedWrapGrid
2. 自定義 GridView 覆寫 PrepareContainerForItemOverride 設定 ColumnSpan/RowSpan

七、面板選擇決策表

八、小結

掌握六大面板特性與適用場景，能讓你：

1. 用 Grid 構建響應式主架構
2. 用 StackPanel 快速堆疊簡單元素
3. 用 Canvas 實現自由定位與動畫軌跡
4. 用 VirtualizingStackPanel/WrapGrid 處理大量資料虛擬化
5. 用 VariableSizedWrapGrid 打造雜誌式不等尺寸版面

記住：虛擬化面板僅限 ItemsControl 使用，一般頁面佈局請用 Grid/StackPanel/Canvas。

原始碼下載：https://files.cnblogs.com/webabcd/Windows8.rar