이번 수업에서는 WinUI 3 C++의 선택 및 토글 컨트롤을 배우겠습니다.
| 컨트롤 원본 이름 | 한국어 명칭 |
|---|---|
| CheckBox | 다중 선택 체크박스 |
| RadioButton | 단일 선택 라디오 버튼 (같은 GroupName 내 상호 배타적) |
| ToggleSwitch | 슬라이드 토글 스위치 |
| ComboBox | 드롭다운 선택 상자 |
| ComboBoxItem | 드롭다운 선택 항목 |
| ListBox | 고정 높이 리스트 선택 상자 (가상화 미지원) |
| ListBoxItem | ListBox 리스트 항목 |
| SelectorBar | 가로 분할 선택기 |
| SelectorBarItem | 분할 탭 항목 |
| TreeView | 계층 트리 뷰 |
| TreeViewItem | 트리 노드 항목 |
| RatingControl | 별점 평점 컨트롤 |
아래 자주 사용하는 컨트롤 예시를 보여드립니다.
SDK 버전마다 약간의 차이가 있을 수 있으며 본 영상은 VS2022로 제작되었습니다.
<?xml version="1.0" encoding="utf-8"?>
<Window
x:Class="App6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="App6 Control Demo">
<ScrollViewer Padding="30" VerticalScrollBarVisibility="Auto">
<StackPanel Spacing="35">
<!-- 1. CheckBox Multi-selection Checkbox -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="1. CheckBox - 다중 선택 체크박스" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<CheckBox Content="옵션 A" IsChecked="True"/>
<CheckBox Content="옵션 B"/>
<CheckBox Content="옵션 C" IsThreeState="True"/>
</StackPanel>
</Border>
<!-- 2. RadioButton Grouped Single Selection -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="2. RadioButton - 그룹 단일 선택 라디오 버튼(GroupName)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<TextBlock Text="성별 그룹 (GroupName=Gender)"/>
<RadioButton GroupName="Gender" Content="남성" IsChecked="True"/>
<RadioButton GroupName="Gender" Content="여성"/>
<RadioButton GroupName="Gender" Content="응답하지 않음"/>
<TextBlock Margin="0,10,0,0" Text="연령대 그룹 (GroupName=Age)"/>
<RadioButton GroupName="Age" Content="18세 미만"/>
<RadioButton GroupName="Age" Content="18~30세"/>
<RadioButton GroupName="Age" Content="30세 이상"/>
</StackPanel>
</Border>
<!-- 3. ToggleSwitch Toggle Slider Switch -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="3. ToggleSwitch - 슬라이드 토글 스위치" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<StackPanel Orientation="Horizontal" Spacing="20" VerticalAlignment="Center">
<ToggleSwitch Header="자동 동기화" IsOn="True"/>
<ToggleSwitch Header="다크 모드" OffContent="꺼짐" OnContent="켜짐"/>
</StackPanel>
</StackPanel>
</Border>
<!-- 4. ComboBox Dropdown Single Select List -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="4. ComboBox - 드롭다운 단일 선택 목록" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<ComboBox Width="260" SelectedIndex="1">
<ComboBoxItem Content="New York"/>
<ComboBoxItem Content="London"/>
<ComboBoxItem Content="Hong Kong"/>
<ComboBoxItem Content="Tokyo"/>
</ComboBox>
</StackPanel>
</Border>
<!-- 5. ListBox Fixed Height Single/Multi List -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="5. ListBox - 고정 높이 다중/단일 선택 리스트" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<ListBox Width="280" Height="140" SelectionMode="Multiple">
<ListBoxItem Content="문서"/>
<ListBoxItem Content="사진"/>
<ListBoxItem Content="동영상"/>
<ListBoxItem Content="음악"/>
<ListBoxItem Content="설치 프로그램"/>
</ListBox>
</StackPanel>
</Border>
<!-- 6. ListView Virtualized High-Performance List (Recommended for Large Data) -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="6. ListView - 가상화 고성능 리스트 (대량 데이터 권장)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<ListView Width="320" Height="160" SelectionMode="Single">
<ListViewItem>
<StackPanel Orientation="Horizontal" Spacing="10">
<SymbolIcon Symbol="Document"/>
<TextBlock Text="데이터 항목 001"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" Spacing="10">
<SymbolIcon Symbol="Document"/>
<TextBlock Text="데이터 항목 002"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" Spacing="10">
<SymbolIcon Symbol="Document"/>
<TextBlock Text="데이터 항목 003"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
</Border>
<!-- 7. GridView Grid Card Layout -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="7. GridView - 격자 카드 레이아웃" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<GridView Width="500" Height="180">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Width" Value="110"/>
<Setter Property="Height" Value="100"/>
</Style>
</GridView.ItemContainerStyle>
<GridViewItem>
<Border Background="LightBlue" Margin="5" CornerRadius="6">
<TextBlock Text="카드 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightGreen" Margin="5" CornerRadius="6">
<TextBlock Text="카드 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightSalmon" Margin="5" CornerRadius="6">
<TextBlock Text="카드 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightPink" Margin="5" CornerRadius="6">
<TextBlock Text="카드 4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightGoldenrodYellow" Margin="5" CornerRadius="6">
<TextBlock Text="카드 5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightCyan" Margin="5" CornerRadius="6">
<TextBlock Text="카드 6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
</GridView>
</StackPanel>
</Border>
<!-- 9. SelectorBar Horizontal Tab Selector -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="9. SelectorBar - 가로 탭 선택 바" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<SelectorBar Width="450">
<SelectorBarItem Text="홈">
<SelectorBarItem.Icon>
<SymbolIcon Symbol="Home"/>
</SelectorBarItem.Icon>
</SelectorBarItem>
<SelectorBarItem Text="메시지">
<SelectorBarItem.Icon>
<SymbolIcon Symbol="Message"/>
</SelectorBarItem.Icon>
</SelectorBarItem>
<SelectorBarItem Text="파일">
<SelectorBarItem.Icon>
<SymbolIcon Symbol="Folder"/>
</SelectorBarItem.Icon>
</SelectorBarItem>
</SelectorBar>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Window>Code language: HTML, XML (xml)