Grid 網格版面配置（行列分割）
StackPanel 堆疊面板（水平／垂直排列）
UniformGrid 等寬高均分網格
RelativePanel 相對定位面板（控制項互相錨定）
Canvas 絕對座標繪圖畫布
DockPanel 停靠面板（上下左右填滿配置）
ScrollViewer 捲動容器（內容超出範圍可滑動）
Border 邊框容器（可設定圓角、邊框、背景色）
Viewbox 自適應縮放容器
GroupBox 分組框（SDK1.4 以上版本支援，具折疊功能）
Expander 可收合展開面板
ContentPresenter 內容範本承載器
ItemsControl 基礎無虛擬化清單容器
以上皆為版面配置相關控制項，下方簡單示範各元件用法。所有範例皆僅透過 XAML 實作，若需在後端 C++ 互動操作，可參照前面章節的教學實作。因控制項數量眾多，本篇不再逐一詳細拆解。
以下為完整 XAML 程式碼
<?xml version="1.0" encoding="utf-8"?>
<Window
x:Class="AppWinui.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppWinui"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="AppWinui">
<!-- 全域捲動容器，處理超出視窗的內容 -->
<ScrollViewer VerticalScrollBarVisibility="Auto" Padding="16">
<StackPanel Spacing="30">
<!-- 1. Grid - 網格版面配置（行列分割） -->
<Expander Header="Grid - Grid Layout (Row & Column Division)">
<Grid Width="450" Height="200" Background="#F0F0F0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Background="LightBlue">
<TextBlock Text="Top Left Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="0" Grid.Column="1" Background="LightGreen">
<TextBlock Text="Top Right Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="1" Grid.Column="0" Background="LightPink">
<TextBlock Text="Bottom Left Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="1" Grid.Column="1" Background="LightGoldenrodYellow">
<TextBlock Text="Bottom Right Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</Expander>
<!-- 2. StackPanel - 堆疊面板（垂直/水平排列） -->
<Expander Header="StackPanel - Stack Panel (Vertical / Horizontal Alignment)">
<StackPanel Spacing="10">
<TextBlock Text="Vertical Stack (Default):"/>
<StackPanel Spacing="6">
<Button Content="Vertical Button 1"/>
<Button Content="Vertical Button 2"/>
<Button Content="Vertical Button 3"/>
</StackPanel>
<TextBlock Text="Horizontal Stack (Orientation=Horizontal):"/>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBox PlaceholderText="Input Box A" Width="140"/>
<TextBox PlaceholderText="Input Box B" Width="140"/>
<Button Content="Confirm"/>
</StackPanel>
</StackPanel>
</Expander>
<!-- 3. RelativePanel - 相對錨定版面 -->
<Expander Header="RelativePanel - Relative Anchoring Layout">
<RelativePanel Width="480" Height="200" Background="#F5F5F5" Padding="12">
<TextBlock x:Name="txtTitle" Text="Title Text" FontSize="20"/>
<TextBox x:Name="txtInput" RelativePanel.Below="txtTitle" Width="340" PlaceholderText="Input box below title"/>
<Button Content="Submit" RelativePanel.RightOf="txtInput" RelativePanel.AlignBottomWith="txtInput"/>
<TextBlock Text="Footer description text" RelativePanel.Below="txtInput" Margin="0,10,0,0" Foreground="Gray"/>
</RelativePanel>
</Expander>
<!-- 4. Canvas - 絕對座標畫布 -->
<Expander Header="Canvas - Absolute Coordinate Canvas">
<Canvas Width="350" Height="200" Background="#EEEEEE">
<Rectangle Canvas.Left="30" Canvas.Top="30" Width="80" Height="80" Fill="CornflowerBlue"/>
<Ellipse Canvas.Left="140" Canvas.Top="60" Width="90" Height="90" Fill="DarkOrange"/>
<TextBlock Canvas.Left="40" Canvas.Top="140" Text="Fixed coordinate text"/>
</Canvas>
</Expander>
<!-- 5. Border - 邊框容器（圓角/邊框/背景） -->
<Expander Header="Border - Border Container (Rounded Corner / Border / Background)">
<Border Width="320" Height="160"
Background="LightSkyBlue"
BorderBrush="DarkBlue"
BorderThickness="3"
CornerRadius="12">
<TextBlock Text="Container with rounded corners & border" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15"/>
</Border>
</Expander>
<!-- 6. Viewbox - 自適應縮放容器 -->
<Expander Header="Viewbox - Auto Scale Container">
<Viewbox Width="260" Height="120">
<StackPanel Orientation="Horizontal" Spacing="8">
<Button Content="Scale Button 1"/>
<Button Content="Scale Button 2"/>
<Button Content="Scale Button 3"/>
</StackPanel>
</Viewbox>
</Expander>
<!-- 7. Expander - 可收合展開面板 -->
<Expander Header="Expander - Collapsible Expand Panel">
<StackPanel Spacing="6">
<TextBlock Text="Content displayed after expand"/>
<CheckBox Content="Option A"/>
<CheckBox Content="Option B"/>
</StackPanel>
</Expander>
<!-- 8. ContentPresenter - 內容範本承載器 -->
<Expander Header="ContentPresenter - Content Template Host">
<ContentPresenter Width="300" Height="80">
<ContentPresenter.Content>
<Border Background="LightCoral" CornerRadius="6">
<TextBlock Text="ContentPresenter hosts any child content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ContentPresenter.Content>
</ContentPresenter>
</Expander>
<!-- 9. ItemsControl - 基礎無虛擬化清單容器 -->
<Expander Header="ItemsControl - Basic Non-Virtualized List Container">
<ItemsControl Width="320">
<ItemsControl.Items>
<TextBlock Text="List Item 1" Margin="0,4"/>
<TextBlock Text="List Item 2" Margin="0,4"/>
<TextBlock Text="List Item 3" Margin="0,4"/>
<TextBlock Text="List Item 4" Margin="0,4"/>
</ItemsControl.Items>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="#F0F0F0" Margin="0,3" Padding="6">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Expander>
</StackPanel>
</ScrollViewer>
</Window>
Code language: HTML, XML (xml)WinUI 3 C++ 控制項實作教學 — 版面配置相關容器
Previous: WinUI 3 C++ 控制項實作教學 — 日期與色彩選擇控制項