WinUI 3 C++ 控件篇-布局相关

Grid 网格布局（行 + 列划分）
StackPanel 堆叠面板（水平 / 垂直排列）
UniformGrid 等宽高均匀网格
RelativePanel 相对定位面板（控件互相锚定）
Canvas 绝对坐标绘图画布
DockPanel 停靠面板（上下左右填充布局）
ScrollViewer 滚动容器（内容超出可滑动）
Border 边框容器（加圆角 / 边框 / 背景）
Viewbox 自适应缩放容器
GroupBox 分组框（SDK1.4 及以上可用，带折叠功能）
Expander 可折叠展开面板
ContentPresenter 内容模板承载器
ItemsControl 基础无虚拟化列表容器

以上控件和布局有关，下面简单演示他们的使用。全部都是在xaml中呈现，如果需要后台cpp中交互，读者可以参考之前的课程，进行操作就可以。控件太多这里就不再铺开来讲解。

下面是我们的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">

    <!-- Global scroll container for overflow content -->
    <ScrollViewer VerticalScrollBarVisibility="Auto" Padding="16">
        <StackPanel Spacing="30">

            <!-- 1. Grid - Grid Layout (Row & Column Division) -->
            <Expander Header="Grid - Grid Layout (Row &amp; 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 - Stack Panel (Vertical / Horizontal Alignment) -->
            <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 - Relative Anchoring Layout -->
            <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 - Absolute Coordinate 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 - Border Container (Rounded / Border / Background) -->
            <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 &amp; border" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15"/>
                </Border>
            </Expander>

            <!-- 6. Viewbox - Auto Scale Container -->
            <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 - Collapsible Expand Panel -->
            <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 - Content Template Host -->
            <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 - Basic Non-Virtualized List Container -->
            <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)