您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> 關於.NET

Windows 8 應用開發：版面配置控制項完整指南與實戰技巧

編輯：關於.NET

前言

Windows Store 應用需適應從平板到桌面的多種螢幕尺寸與解析度。掌握版面配置控制項的特性與組合技巧，是建立彈性自適應 UI 的關鍵。

Panel 基底類別與附加屬性

所有版面控制項繼承自 Panel，支援附加屬性 (Attached Property) 實現子元素定位：

<Grid>
    <TextBlock Grid.Row="0" Grid.Column="1" />  <!-- 附加屬性 -->
</Grid>

六大核心版面控制項詳細解析

1. Grid - 表格式彈性配置 (最常用)

行/列定義三種尺寸模式

模式	語法	行為	範例
絕對尺寸	數值	固定像素	Height="50"
相對尺寸 (星號)	* / 2* / 3*	按比例分配剩餘空間	Height="2*"
自動尺寸	Auto	依內容大小調整	Height="Auto"

星號比例範例

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>  <!-- 佔 2/3 -->
        <RowDefinition Height="*"/>   <!-- 佔 1/3 -->
    </Grid.RowDefinitions>
</Grid>

若 Grid 高度 600px：第一列 400px，第二列 200px。加入 3* 則比例 3:2:1 → 300:200:100。

混合模式實戰

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>  <!-- 標題列，依內容高度 -->
        <RowDefinition Height="*"/>     <!-- 內容區，佔滿剩餘 -->
    </Grid.RowDefinitions>
</Grid>

2. Canvas - 絕對座標定位

最簡單但最不彈性的配置，適合固定位置的圖形繪製：

<Canvas>
    <Button Canvas.Left="785" Canvas.Top="427" Content="配置按鈕"/>
    <TextBlock Canvas.Left="814" Canvas.Top="248" Text="配置文字" FontSize="24"/>
    <Rectangle Fill="Red" Canvas.Left="241" Canvas.Top="319" Width="70" Height="50"/>
    <Ellipse Fill="Yellow" Canvas.Left="611" Canvas.Top="202" Width="75" Height="75"/>
</Canvas>

Canvas.Left、Canvas.Top：相對 Canvas 左上角座標
Canvas.ZIndex：重疊時的 Z 軸順序，值大者置頂

3. StackPanel - 線性堆疊

單一方向排列，無行列概念：

<StackPanel Orientation="Vertical">  <!-- 預設垂直 -->
    <Button Content="項目 1"/>
    <Button Content="項目 2"/>
</StackPanel>

<StackPanel Orientation="Horizontal">
    <TextBlock Text="水平項目" Margin="20,50,0,50"/>
</StackPanel>

使用 Margin 控制項目間距。

4. WrapGrid - 自動換行網格

項目超出邊界自動換行，適合動態集合顯示：

<GridView>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal" />  <!-- 水平排列，垂直換行 -->
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

5. VariableSizedWrapGrid - 彈性跨行跨列網格

支援 RowSpan/ColumnSpan 附加屬性：

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80" VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80" VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

每個 Cell 尺寸依內容動態調整 (VariableSized)
適合雜誌式版面、儀表板

6. VirtualizingStackPanel - 虛擬化堆疊 (大量資料效能關鍵)

僅建立可視項目容器，大幅降低記憶體佔用：

<ComboBox>
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel VirtualizationMode="Recycling" />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>
</ComboBox>

<ListBox VirtualizingStackPanel.VirtualizationMode="Recycling" 
         ItemsSource="{StaticResource LargeDataSource}" />

指標	StackPanel	VirtualizingStackPanel
10000 項載入時間	數秒	毫秒級
記憶體佔用	高 (全建立)	極低 (僅可視)
適用場景	少量固定項目	大量動態資料繫結

Border - 邊框裝飾容器

非 Panel 衍生，單一子元素容器：

<Border BorderBrush="Red" BorderThickness="2" Width="150" Height="100">
    <TextBlock Text="邊框示範" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>

<Border BorderBrush="Yellow" BorderThickness="3" Width="220" Height="100">
    <StackPanel>
        <TextBlock Text="邊框示範: Windows 8 教學"/>
        <TextBlock Text="Http://www.silverlightchina.net"/>
    </StackPanel>
</Border>