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 - Grid Layout (Row & Column Division) -->
<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 - 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 & 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)WinUI 3 C++ 컨트롤 강의 – 레이아웃 관련 컨테이너