Panduan Kontrol WinUI 3 C++ — Wadah Terkait Tata Letak

Grid Tata letak grid (pembagian baris dan kolom)
StackPanel Panel tumpuk (susunan mendatar / vertikal)
UniformGrid Grid seragam dengan lebar dan tinggi sama
RelativePanel Panel posisi relatif (saling jangkar antar kontrol)
Canvas Kanvas gambar koordinat absolut
DockPanel Panel dock (tata letak isi penuh atas, bawah, kiri, kanan)
ScrollViewer Wadah gulir (bisa digeser jika konten meluap)
Border Wadah bingkai (tambahan sudut bulat / bingkai / latar belakang)
Viewbox Wadah skala adaptif
GroupBox Kotak kelompok (tersedia SDK1.4 ke atas, ada fungsi lipat)
Expander Panel yang bisa dilipat dan dibuka
ContentPresenter Wadah templat konten
ItemsControl Wadah daftar dasar tanpa virtualisasi

Semua kontrol di atas berkaitan dengan tata letak, di bawah ini demo singkat penggunaannya. Semua ditampilkan di XAML saja, jika butuh interaksi dengan CPP backend, pembaca bisa rujuk pelajaran sebelumnya untuk mengoperasikannya. Kontrol terlalu banyak jadi tidak dijelaskan satu per satu secara rinci di sini.

Berikut adalah kode XAML kita

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

    <!-- Wadah gulir global untuk konten meluap -->
    <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)

Panduan Kontrol WinUI 3 C++ — Wadah Terkait Tata Letak