개요

WinUI3에서 제공하는 ListView와 GridView 컨트롤은 매우 강력한 기능을 갖추고 있습니다.これらのコントロールは追加のカスタマイズなしに 바로 사용할 수 있으며, 필요하다면 자유롭게 스타일과 레이아웃을 변경할 수 있습니다. ListView는 수직 목록을, GridView는 격자 형태의 배열을 제공하여 다양한 데이터 컬렉션을 효과적으로 표현할 수 있습니다.

이러한 컨트롤의 핵심 특징은 "반복적인 하위 요소"입니다. 동일한 스타일의 항목이 여러 번 반복되어 표시되므로, 개발자는 각 항목의Appearance에만 집중하면 됩니다.

데이터 연결 방법

ListView와 GridView는 ItemsSource 속성을 사용하여 데이터를 바인딩하거나, XAML 태그 내에 직접 Items를 추가할 수 있습니다. 그러나 두 방법은 동시에 사용할 수 없습니다.

우선순위: ItemsSource가 Items보다 높은 우선순위를 가집니다. 즉, 데이터를 바인딩하면 XAML에 수동으로 추가한 항목은 무시됩니다.

데이터 바인딩 예시

<ListView ItemsSource="{x:Bind ViewModel.DataList}" />

레이아웃 설정

기본적으로 ListView는 ItemsStackPanel을, GridView는 ItemsWrapGrid를 사용합니다. 이러한 패널은 가상화를 지원하므로 성능을 유지하면서 많은 항목을 표시할 수 있습니다.

중요: ItemsPanel을 변경할 때 가상화를 비활성화하지 마세요. ItemsStackPanel과 ItemsWrapGrid는 가상화를 지원하므로 안전하게 사용할 수 있습니다. 다른 패널을 사용하면 가상화가 비활성화되어 성능이 저하될 수 있습니다.

수평 스크롤 가능한 ListView 구현

<ListView Height="80">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

스크롤 설정

ScrollViewer 속성을 통해 스크롤 동작을 제어할 수 있습니다:

• HorizontalScrollMode: 수평 스크롤 활성화/비활성화
• HorizontalScrollBarVisibility: 수평 스크롤바 표시 여부
• VerticalScrollMode: 수직 스크롤 활성화/비활성화
• VerticalScrollBarVisibility: 수직 스크롤바 표시 여부

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>사과</x:String>
    <x:String>바나나</x:String>
    <x:String>포도</x:String>
</ListView>

선택과 클릭 이벤트

ListView는 SelectionMode와 IsItemClickEnabled 속성을 통해 다양한 상호작용을 지원합니다.

선택 모드

• None: 선택 불가, 읽기 전용
• Single: 단일 선택. Ctrl+클릭으로 선택 해제 가능. 선택 시 SelectedItem과 SelectedIndex가 유효한 값을 가짐. 미선택 시 각각 null과 -1
• Multiple: 다중 선택. Shift+클릭으로 범위 선택. SelectedItems로 모든 선택 항목 접근
• Extended: 확장 모드. Multiple과 유사하나 추가적인 키보드 조합 지원

SelectionMode가 None이 아니고 IsItemClickEnabled가 True일 경우, 선택과 클릭 이벤트가 모두 발생합니다. 이벤트 발생 순서는 클릭 이벤트가 먼저 실행됩니다.

선택 변경 이벤트 처리

<ListView x:Name="sampleListView" 
          SelectionMode="Multiple"
          SelectionChanged="OnSelectionChanged">
</ListView>

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // 선택 변경 로직 구현
}

클릭 이벤트 처리

<ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="OnItemClicked">
</ListView>

private void OnItemClicked(object sender, ItemClickEventArgs e)
{
    // 클릭 로직 구현
}

코드에서 선택 조작 API

코드 비하인드에서 프로그래밍적으로 선택을 제어할 수 있습니다:

var listView = new ListView();

// 모든 항목 선택
listView.SelectAll();

// 범위 선택 (시작 인덱스, 개수)
listView.SelectRange(new ItemIndexRange(0, (uint)listView.Items.Count));

// 범위 선택 해제
listView.DeselectRange(new ItemIndexRange(0, (uint)listView.Items.Count));

참고 자료

Microsoft 공식 WinUI3 문서