Guia de Controles WinUI 3 C++ — Contêineres de Layout

Grid Layout de grade (divisão por linhas e colunas)
StackPanel Painel de empilhamento (organização horizontal / vertical)
UniformGrid Grade uniforme com células de tamanho igual
RelativePanel Painel de posicionamento relativo (ancorar controles uns aos outros)
Canvas Tela de desenho com coordenadas absolutas
DockPanel Painel de encaixe (layout de preenchimento superior, inferior, esquerda, direita)
ScrollViewer Contêiner com rolagem (deslizável quando o conteúdo transborda)
Border Contêiner com borda (cantos arredondados / contorno / fundo)
Viewbox Contêiner de escala automática adaptável
GroupBox Caixa de agrupamento (disponível a partir do SDK 1.4, com função recolhível)
Expander Painel expansível e recolhível
ContentPresenter Hospedeiro de modelo de conteúdo
ItemsControl Contêiner de lista básico sem virtualização

Todos os controles acima são relacionados a layout. Abaixo uma demonstração simples de seu uso. Tudo é renderizado apenas em XAML. Se precisar de interação com o código backend C++, consulte as aulas anteriores para implementar. Existem muitos controles, portanto não detalharemos cada um aqui.

Abaixo está nosso código XAML completo

<?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">

    <!-- Contêiner de rolagem global para conteúdo transbordante -->
    <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)

Guia de Controles WinUI 3 C++ — Contêineres de Layout