Guía de Controles WinUI 3 C++ — Contenedores de Diseño

Grid Diseño de cuadrícula (división de filas y columnas)
StackPanel Panel de apilamiento (disposición horizontal / vertical)
UniformGrid Cuadrícula uniforme de ancho y alto iguales
RelativePanel Panel de posicionamiento relativo (anclar controles entre sí)
Canvas Lienzo de dibujo con coordenadas absolutas
DockPanel Panel de acoplamiento (diseño de relleno arriba, abajo, izquierda, derecha)
ScrollViewer Contenedor desplazable (se puede deslizar cuando el contenido desborda)
Border Contenedor con borde (esquinas redondeadas / borde / fondo)
Viewbox Contenedor de escala adaptable automática
GroupBox Caja de agrupación (disponible desde SDK 1.4 en adelante, función contraíble)
Expander Panel expandible y contraíble
ContentPresenter Contenedor de plantilla de contenido
ItemsControl Contenedor de lista básico sin virtualización

Todos los controles anteriores están relacionados con el diseño. A continuación se muestra una demostración sencilla de su uso. Todo se renderiza únicamente en XAML. Si necesita interacción con el backend C++, consulte las lecciones anteriores para realizar la implementación. Hay demasiados controles para explicar cada uno en detalle aquí.

A continuación nuestro 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">

    <!-- Contenedor de desplazamiento global para contenido desbordado -->
    <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>
Lenguaje del código: HTML, XML (xml)

Guía de Controles WinUI 3 C++ — Contenedores de Diseño