목록 보기 및 그리드 보기

대부분의 애플리케이션은 이미지 갤러리 또는 전자 메일 메시지 집합과 같은 데이터 집합을 조작하고 표시합니다. XAML UI 프레임워크는 앱에서 데이터를 쉽게 표시하고 조작할 수 있는 ListView 및 GridView 컨트롤을 제공합니다.

참고 항목

ListView와 GridView는 모두 ListViewBase 클래스에서 파생되므로 기능이 동일하지만 데이터를 다르게 표시합니다. 이 문서에서는 달리 지정하지 않는 한 목록 보기에 대한 토론이 ListView 및 GridView 컨트롤 모두에 적용됩니다. ListView 또는 ListViewItem과 같은 클래스를 참조할 수 있지만 그리드와 관련된 동일한 항목에 대해 List 접두사는 Grid로 바꿀 수 있습니다(GridView 또는 GridViewItem).

ListView 및 GridView 컨트롤은 컬렉션을 사용할 때 많은 이점을 제공합니다. 둘 다 쉽게 구현할 수 있으며 쉽게 사용자 지정할 수 있는 동안 기본 UI, 상호 작용 및 스크롤을 제공합니다. 또한 둘 다 기존 동적 데이터 원본 또는 XAML 자체 또는 코드 숨김에 제공된 하드 코딩된 데이터에 바인딩할 수 있습니다.

두 컨트롤은 다양한 시나리오에서 유연하게 사용할 수 있지만, 전반적으로 모든 항목이 동일한 기본 구조와 모양뿐만 아니라 동일한 상호 작용 동작을 갖는 컬렉션에서 가장 잘 작동합니다. 즉, 모두 클릭할 때(예: 링크를 열거나 찾아보기 위해) 동일한 작업을 수행해야 합니다.

ListView 및 GridView 비교

ListView

ListView 컨트롤은 단일 열에 세로로 누적된 데이터를 표시합니다. ListView는 텍스트를 초점으로 사용하는 항목과 위에서 아래로 읽으려는 컬렉션(예: 사전순 순서)에 더 적합합니다. ListView의 일반적인 사용 사례로 메시지 목록과 검색 결과를 들 수 있습니다. 컬렉션을 여러 열 또는 테이블과 같은 형식으로 표시해야 하는 경우 ListView를 사용하면 안 됩니다. 대신 DataGrid 컨트롤을 사용하는 것이 좋습니다.

Screenshot of a list view of data that's grouped alphabetically.

GridView

GridView 컨트롤은 세로로 스크롤할 수 있는 행과 열의 항목 컬렉션을 제공합니다. 데이터는 열을 채울 때까지 가로로 쌓인 다음 열의 다음 행을 계속합니다. GridView는 이미지를 초점으로 사용하거나 항목을 좌우로 읽을 수 있거나 특정 순서로 정렬되지 않은 컬렉션에 더 적합합니다. GridView의 일반적인 사용 사례로 사진 또는 제품 갤러리를 들 수 있습니다.

Screenshot of a content library of photos displayed as a grid view.

어떤 컬렉션 컨트롤을 사용해야 하나요? ItemsRepeater와 비교

사용할 컨트롤을 결정하기 전에 이러한 유형의 컨트롤 간의 차이점을 이해하는 것이 중요합니다.

ListView 및 GridView

기능이 풍부한 ListView 및 GridView 컨트롤은 기본으로 작동합니다. 사용자 지정은 필요하지 않지만 쉽게 사용자 지정할 수 있습니다. 각각에는 고유한 기본 제공 UI 및 UX가 있으며 거의 모든 유형의 컬렉션을 있는 그대로 표시하도록 설계되었습니다.

ItemsRepeater

ItemsRepeater 컨트롤은 컬렉션을 표시하는 데도 사용되지만 특정 UI 요구 사항에 맞게 사용자 지정 컨트롤을 만들기 위한 구성 요소로 설계되었습니다. ListView 및 GridView와 동일한 기본 제공 기능 및 기능이 없으므로 필요한 기능이나 상호 작용을 구현해야 합니다. ListView 또는 GridView를 사용하여 만들 수 없는 고도로 사용자 지정된 UI가 있거나 데이터 원본에 각 항목에 대해 다른 동작이 필요한 경우 ItemsRepeater를 사용합니다.

지침API 설명서를 참조하여 ItemsRepeater에 대해 자세히 알아보세요.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3을 사용하는 앱에 최적화되어 있지만 일반적으로 WinUI 2를 사용하는 UWP 앱에 적용됩니다. 플랫폼별 정보 및 예제는 UWP API 참조를 참조하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 포함되어 있습니다.

이러한 컨트롤에 대한 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

최신 WinUI 2 를 사용하여 모든 컨트롤에 대한 최신 스타일과 템플릿을 가져오는 것이 좋습니다.

목록 보기 또는 그리드 보기 만들기

WinUI 3 갤러리 앱을 열고 ListView 또는 GridView의 작동을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 기능 및 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 가져오거나 GitHub에서 소스 코드를 가져옵니다.

ListView 및 GridView는 모두 ItemsControl 형식이므로 모든 형식의 항목 컬렉션을 포함할 수 있습니다. ListView 또는 GridView 컨트롤은 항목 컬렉션에 항목이 있어야 화면에 아무것도 표시할 수 있습니다. 보기를 채우기 위해 컬렉션에 직접 항목을 추가하거나 ItemsSource 속성을 데이터 원본으로 설정할 수 있습니다.

주의

Items 또는 ItemsSource 속성을 사용하여 목록을 채울 수 있지만 동시에 둘 다 사용할 수는 없습니다. ItemsSource 속성을 설정하고 XAML에 항목을 추가하면 추가된 항목이 무시됩니다. ItemsSource 속성을 설정하고 코드의 Items 컬렉션에 항목을 추가하면 예외가 throw됩니다.

이 문서의 많은 예제는 단순성을 위해 Items 컬렉션을 직접 채웁니다. 그러나 목록의 항목은 온라인 데이터베이스의 책 목록과 같은 동적 원본에서 가져오는 것이 더 일반적입니다. 이 용도로 ItemsSource 속성을 사용합니다.

ListView 또는 GridView 컨트롤에 항목 추가

XAML 또는 코드를 사용하여 동일한 결과를 생성하여 ListView 또는 GridView Items 컬렉션에 항목을 추가할 수 있습니다. 변경되지 않고 쉽게 정의되는 항목 수가 적거나 런타임에 코드에서 항목을 생성하는 경우 일반적으로 XAML을 통해 항목을 추가합니다.

방법 1: Items 컬렉션에 항목 추가

  • 옵션 1: XAML을 통해 항목 추가

    <!-- No corresponding C# code is needed for this example. -->
    
    <ListView x:Name="Fruits">
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
    </ListView>
    
  • 옵션 2: 코드를 통해 항목 추가

    <StackPanel Name="FruitsPanel"></StackPanel>
    
    // Create a new ListView and add content.
    ListView Fruits = new ListView();
    Fruits.Items.Add("Apricot");
    Fruits.Items.Add("Banana");
    Fruits.Items.Add("Cherry");
    Fruits.Items.Add("Orange");
    Fruits.Items.Add("Strawberry");
    
    // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file).
    FruitsPanel.Children.Add(Fruits);
    

이러한 두 옵션은 다음과 같이 동일한 목록 보기를 생성합니다.

Screenshot of a simple list view displaying a list of fruits.

방법 2: ItemsSource 속성을 설정하여 항목 추가

일반적으로 ListView 또는 GridView를 사용하여 데이터베이스 또는 인터넷과 같은 원본의 데이터를 표시합니다. 데이터 원본에서 ListView 또는 GridView 컨트롤을 채웁니다. 해당 ItemsSource 속성을 데이터 항목 컬렉션으로 설정합니다. 다음 예제와 같이 ListView 또는 GridView가 사용자 지정 클래스 개체를 보유하려는 경우 이 메서드가 더 잘 작동합니다.

  • 옵션 1: 코드에서 ItemsSource 설정

    여기서 ListView ItemsSource 속성은 코드에서 컬렉션의 인스턴스로 직접 설정됩니다.

    <StackPanel x:Name="ContactPanel"></StackPanel>
    
    // Class definition should be provided within the namespace being used, outside of any other classes.
    
    this.InitializeComponent();
    
    // Instead of adding hard coded items to an ObservableCollection as shown here,
    //the data could be pulled asynchronously from a database or the internet.
    ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();
    
    // You create Contact objects by providing a first name, last name, and company for the Contact constructor.
    // They are then added to the ObservableCollection Contacts.
    Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
    Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
    Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
    
    // Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
    ListView ContactsLV = new ListView();
    ContactsLV.ItemsSource = Contacts;
    
    // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
    ContactPanel.Children.Add(ContactsLV);
    
  • 옵션 2: XAML에서 ItemsSource 설정

    XAML에서 ItemsSource 속성을 컬렉션에 바인딩할 수도 있습니다. 여기서 ItemsSource는 연락처라는 공용 속성에 바인딩됩니다. 이 속성은 _contacts이라는 페이지의 개인 데이터 컬렉션을 노출합니다.

    <ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>
    
    // Provide a class definition within the namespace being used, outside of any other classes.
    // These two declarations belong outside the main page class.
    private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();
    
    public ObservableCollection<Contact> Contacts
    {
        get { return this._contacts; }
    }
    
    // Define this method within your main page class.
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
    
        // Instead of hard coded items, the data could be pulled
        // asynchronously from a database or the internet.
        Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
        Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
        Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
    }
    

다음 스크린샷과 같이 두 옵션 모두 동일한 목록 보기를 생성합니다. (이 연습에 대해 데이터 템플릿이 정의되지 않았기 때문에 목록 보기에는 각 항목의 문자열 표현이 표시됩니다.)

Screenshot displaying a simple list view with the ItemsSource property set.

Important

정의된 데이터 템플릿이 없으면 정의된 ToString 메서드가 있는 경우에만 사용자 지정 클래스 개체가 문자열 값을 사용하여 목록 보기에 표시됩니다.

다음 섹션에서는 ListView 또는 GridView 템플릿에서 단순 및 사용자 지정 클래스 항목을 올바르게 시각적으로 나타내는 방법에 대해 자세히 설명합니다.

데이터 바인딩에 대한 자세한 내용은 데이터 바인딩 개요를 참조하세요.

참고 항목

목록 보기에 그룹화된 데이터를 표시해야 하는 경우 CollectionViewSource 클래스에 바인딩해야 합니다. CollectionViewSource는 XAML에서 컬렉션 클래스의 프록시 역할을 하며 그룹화 지원을 사용하도록 설정합니다. 자세한 내용은 CollectionViewSource를 참조 하세요.

데이터 템플릿을 사용하여 모양 사용자 지정

ListView 또는 GridView 컨트롤에서 데이터 템플릿을 사용하여 항목과 데이터를 시각화하는 방법을 정의할 수 있습니다. 기본적으로 데이터 항목은 바운딩된 데이터 개체의 문자열 표현으로 목록 보기에 표시됩니다. DisplayMemberPath를 해당 속성으로 설정하여 데이터 항목의 특정 속성에 대한 문자열 표현을 표시할 수 있습니다.

그러나 일반적으로 데이터의 더 풍부한 프레젠테이션을 표시하려고 할 수 있습니다. 목록 보기 또는 그리드 보기의 항목을 표시하는 방법을 지정하려면 DataTemplate 클래스를 만듭니다. DataTemplate의 XAML은 개별 항목을 표시하는 데 사용되는 컨트롤의 레이아웃과 모양을 정의합니다. 레이아웃의 컨트롤은 데이터 개체의 속성에 바인딩되거나 인라인으로 정의된 정적 콘텐츠를 포함할 수 있습니다.

Important

DataTemplate에서 x:Bind 태그 확장을 사용하는 경우 데이터 템플릿에서 데이터 형식(x:DataType)을 지정해야 합니다.

간단한 ListView 데이터 템플릿

이 예제에서 데이터 항목은 간단한 문자열입니다. 문자열 왼쪽에 이미지를 추가하고 문자열을 청록색으로 표시하려면 ListView 정의 내에서 DataTemplate 인라인을 정의합니다. 이는 메서드 1에서 옵션 1을 사용하여 이전에 만든 것과 동일한 ListView 컨트롤입니다.

<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

간단한 ListView 데이터 템플릿을 적용할 때 데이터 항목이 표시되는 방법은 다음과 같습니다.

Screenshot of list that's displayed after a simple ListView data template is applied.

사용자 지정 클래스 개체에 대한 ListView 데이터 템플릿

다음 예제에서 데이터 항목은 Contact 개체입니다. 연락처 이름과 회사의 왼쪽에 연락처 이미지를 추가하려면 ListView 정의 내에서 DataTemplate 인라인을 정의합니다. 이 ListView 데이터 템플릿은 앞에서 설명한 것처럼 메서드 2의 옵션 2에서 만들어졌습니다.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

사용자 지정 클래스 개체에 ListView 데이터 템플릿을 적용할 때 데이터 항목이 표시되는 방법은 다음과 같습니다.

Screenshot of a list that's displayed after a ListView data template for custom class objects is applied.

데이터 템플릿은 ListView의 모양을 정의하는 기본적인 방법입니다. 목록에 많은 수의 항목이 있는 경우에도 성능에 큰 영향을 줄 수 있습니다.

앞의 코드와 같이 ListView 또는 GridView 정의 내에서 또는 리소스 섹션에 별도로 데이터 템플릿을 인라인으로 정의할 수 있습니다. ListView 또는 GridView 정의 외부에서 정의하는 경우 데이터 템플릿에 x:Key 특성을 제공하고 해당 키를 사용하여 ListView 또는 GridView의 ItemTemplate 속성에 할당해야 합니다.

데이터 템플릿 및 항목 컨테이너를 사용하여 목록이나 그리드의 항목 모양을 정의하는 방법에 대한 자세한 내용과 예제는 항목 컨테이너 및 템플릿을 참조하세요.

항목의 레이아웃 변경

ListView 또는 GridView 컨트롤에 항목을 추가하면 항목 컨테이너의 각 항목을 자동으로 래핑한 다음 모든 항목 컨테이너를 배치합니다. 이러한 항목 컨테이너를 배치하는 방법은 컨트롤의 ItemsPanel 속성에 따라 달라집니다.

  • ListView는 기본적으로 세로 목록을 생성하는 ItemsStackPanel을 사용합니다.

    Screenshot of a simple list view displaying a vertical list of items.

  • GridView는 항목을 가로로 추가하고 세로로 래핑 및 스크롤하는 ItemsWrapGrid를 사용합니다.

    Screenshot of a simple grid view displaying a horizontal list of items.

항목 패널에서 속성을 조정하여 항목의 레이아웃을 수정하거나 기본 패널을 다른 패널로 바꿀 수 있습니다.

참고 항목

ItemsPanel을 변경하는 경우 가상화를 사용하지 않도록 설정하지 마세요. ItemsStackPanel과 ItemsWrapGrid는 모두 가상화를 지원하므로 이러한 클래스는 안전하게 사용할 수 있습니다. 다른 패널을 사용하는 경우 가상화를 사용하지 않도록 설정하고 목록 보기의 성능을 저하시킬 수 있습니다. 자세한 내용은 성능 아래의 목록 보기 문서를 참조하세요.

이 예제에서는 ItemsStackPanel의 Orientation 속성을 변경하여 ListView 컨트롤을 가로 목록에 항목 컨테이너를 배치하는 방법을 보여 줍니다.

목록 보기는 기본적으로 세로로 스크롤되므로 목록 보기의 내부 ScrollViewer 에서 일부 속성을 조정하여 가로로 스크롤해야 합니다.

Important

다음 예제는 목록 보기 너비가 제한되지 않은 상태로 표시되므로 가로 스크롤 막대가 표시되지 않습니다. 이 코드를 실행하면 ListView에서 스크롤 막대를 표시하도록 설정할 Width="180" 수 있습니다.

<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>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

목록이 표시되는 방법은 다음과 같습니다.

Screenshot of a horizontal list view.

다음 예제에서 ListView는 ItemsStackPanel 대신 ItemsWrapGrid를 사용하여 세로 줄 바꿈 목록에 항목을 배치합니다.

Important

컨트롤이 컨테이너를 래핑하도록 목록 보기의 높이를 제한해야 합니다.

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

목록이 표시되는 방법은 다음과 같습니다.

Screenshot of a list view with a grid layout.

목록 보기에 그룹화된 데이터를 표시하는 경우 ItemsPanel은 개별 항목이 배치되는 방식이 아니라 항목 그룹을 배치하는 방법을 결정합니다. 예를 들어 이전에 표시된 가로 ItemsStackPanel을 사용하여 그룹화된 데이터를 표시하는 경우 그룹은 가로로 정렬되지만 각 그룹의 항목은 다음과 같이 세로로 쌓여 있습니다.

Screenshot of a grouped horizontal list view..

항목 선택 및 상호 작용

사용자가 목록 보기와 상호 작용할 수 있도록 하는 다양한 방법 중에서 선택할 수 있습니다. 기본적으로 사용자는 단일 항목을 선택할 수 있습니다. SelectionMode 속성을 변경하여 다중 선택을 사용하거나 선택을 사용하지 않도록 설정할 수 있습니다. 사용자가 항목을 선택하는 대신 작업을 호출하도록 항목(예: 단추)을 클릭하도록 IsItemClickEnabled 속성을 설정할 수 있습니다.

참고 항목

ListView와 GridView 모두 SelectionMode 속성에 ListViewSelectionMode 열거형을 사용합니다. IsItemClickEnabled는 기본적으로 False설정되므로 클릭 모드를 사용하도록 설정하기만 하면 됩니다.

이 표에서는 사용자가 목록 보기와 상호 작용할 수 있는 방법과 상호 작용에 응답하는 방법을 보여줍니다.

이 상호 작용을 사용하도록 설정하려면 다음을 수행합니다. 사용할 설정 이 이벤트를 처리합니다. 이 속성을 사용하여 선택한 항목을 가져옵니다.
상호 작용 없음 SelectionMode="None"
IsItemClickEnabled="False"
해당 없음 해당 없음
단일 선택 SelectionMode="Single"
IsItemClickEnabled="False"
SelectionChanged SelectedItem
SelectedIndex
다중 선택 SelectionMode="Multiple"
IsItemClickEnabled="False"
SelectionChanged SelectedItems
확장 선택 SelectionMode="Extended"
IsItemClickEnabled="False"
SelectionChanged SelectedItems
클릭 SelectionMode="None"
IsItemClickEnabled="True"
ItemClick 해당 없음

참고 항목

SelectionMode가 Single, Multiple 또는 Extended로 설정된 동안 IsItemClickEnabled를 사용하여 ItemClick 이벤트를 발생하도록 설정할 수 있습니다. 이렇게 하면 ItemClick 이벤트가 먼저 발생하고 SelectionChanged 이벤트가 발생합니다. 경우에 따라(예: ItemClick 이벤트 처리기의 다른 페이지로 이동하는 경우) SelectionChanged 이벤트가 발생하지 않고 항목이 선택되지 않습니다.

다음과 같이 XAML 또는 코드에서 이러한 속성을 설정할 수 있습니다.

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>
myListView.SelectionMode = ListViewSelectionMode.Multiple;

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

읽기 전용

SelectionMode 속성을 ListViewSelectionMode.None 으로 설정하여 항목 선택을 사용하지 않도록 설정할 수 있습니다. 이렇게 하면 컨트롤이 읽기 전용 모드로 전환되므로 데이터를 표시하는 데 사용되지만 상호 작용에는 사용되지 않습니다. 즉, 항목 선택을 사용할 수 없지만 컨트롤 자체는 사용하지 않습니다.

단일 선택

이 표에서는 SelectionMode가 Single로 설정된 경우의 키보드, 마우스 및 터치 조작에 대해 설명합니다.

한정자 키 상호 작용
None
  • 사용자는 스페이스바, 마우스 클릭 또는 탭을 사용하여 단일 항목을 선택할 수 있습니다.
  • Ctrl
  • 사용자는 스페이스바, 마우스 클릭 또는 탭을 사용하여 단일 항목의 선택을 취소할 수 있습니다.
  • 화살표 키를 사용하면 선택 영역과 관계없이 포커스를 이동할 수 있습니다.
  • SelectionMode가 Single설정된 경우 SelectedItem 속성에서 선택한 데이터 항목을 가져올 수 있습니다. SelectedIndex 속성을 사용하여 선택한 항목의 컬렉션에서 인덱스를 가져올 수 있습니다. 선택한 항목이 없으면 SelectedItem이 null이고 SelectedIndex가 -1입니다.

    Items 컬렉션에 없는 항목을 SelectedItem으로 설정하려고 하면 작업이 무시되고 SelectedItem이 null입니다. 그러나 SelectedIndex를 목록의 항목 범위를 벗어난 인덱스로 설정하려고 하면 System.ArgumentException 예외가 발생합니다.

    다중 선택

    이 표에서는 SelectionMode가 Multiple로 설정된 경우의 키보드, 마우스 및 터치 조작에 대해 설명합니다.

    한정자 키 상호 작용
    None
  • 사용자는 스페이스바, 마우스 클릭 또는 탭을 사용하여 여러 항목을 선택하여 포커스가 있는 항목을 선택할 수 있습니다.
  • 화살표 키를 사용하면 사용자가 선택한 항목과 독립적으로 포커스를 이동할 수 있습니다.
  • Shift
  • 사용자는 선택 영역의 첫 번째 항목을 클릭하거나 탭한 다음 선택 영역의 마지막 항목을 클릭하거나 탭하여 여러 연속 항목을 선택할 수 있습니다.
  • 화살표 키를 사용하면 Shift 키를 선택할 때 선택한 항목부터 시작하여 연속 항목을 선택할 수 있습니다.
  • 확장 선택

    이 표에서는 SelectionMode가 확장으로 설정된 경우의 키보드, 마우스 및 터치 조작에 대해 설명합니다.

    한정자 키 상호 작용
    None
  • 동작은 단일 선택 영역과 동일합니다.
  • Ctrl
  • 사용자는 스페이스바, 마우스 클릭 또는 탭을 사용하여 여러 항목을 선택하여 포커스가 있는 항목을 선택할 수 있습니다.
  • 화살표 키를 사용하면 선택 영역과 관계없이 포커스를 이동할 수 있습니다.
  • Shift
  • 사용자는 선택 영역의 첫 번째 항목을 클릭하거나 탭한 다음 선택 영역의 마지막 항목을 클릭하거나 탭하여 여러 연속 항목을 선택할 수 있습니다.
  • 화살표 키를 사용하면 Shift 키를 선택할 때 선택한 항목부터 시작하여 연속 항목을 선택할 수 있습니다.
  • SelectionMode가 Multiple 또는 Extended로 설정된 경우 SelectedItems 속성에서 선택한 데이터 항목을 가져올 수 있습니다.

    SelectedIndex, SelectedItem 및 SelectedItems 속성이 동기화됩니다. 예를 들어 SelectedIndex를 -1로 설정하면 SelectedItem이 null설정되고 SelectedItems가 비어 있습니다. SelectedItem을 null설정하면 SelectedIndex가 -1로 설정되고 SelectedItems가 비어 있습니다.

    다중 선택 모드에서 SelectedItem은 먼저 선택한 항목을 포함하고 Selectedindex는 먼저 선택한 항목의 인덱스를 포함합니다.

    선택 변경 내용에 응답

    목록 보기의 선택 변경 내용에 응답하려면 SelectionChanged 이벤트를 처리합니다. 이벤트 처리기 코드에서 SelectionChangedEventArgs.AddedItems 속성에서 선택한 항목 목록을 가져올 수 있습니다 . SelectionChangedEventArgs.RemovedItems 속성에서 선택 취소된 항목을 가져올 수 있습니다 . 사용자가 Shift 키를 누른 채 항목 범위를 선택하지 않는 한 AddedItems 및 RemovedItems 컬렉션에는 최대 하나의 항목이 포함됩니다.

    다음 예제에서는 SelectionChanged 이벤트를 처리하고 다양한 Item 컬렉션에 액세스하는 방법을 보여 줍니다.

    <StackPanel HorizontalAlignment="Right">
        <ListView x:Name="listView1" SelectionMode="Multiple"
                  SelectionChanged="ListView1_SelectionChanged">
            <x:String>Apricot</x:String>
            <x:String>Banana</x:String>
            <x:String>Cherry</x:String>
            <x:String>Orange</x:String>
            <x:String>Strawberry</x:String>
        </ListView>
        <TextBlock x:Name="selectedItem"/>
        <TextBlock x:Name="selectedIndex"/>
        <TextBlock x:Name="selectedItemCount"/>
        <TextBlock x:Name="addedItems"/>
        <TextBlock x:Name="removedItems"/>
    </StackPanel>
    
    private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (listView1.SelectedItem != null)
        {
            selectedItem.Text =
                "Selected item: " + listView1.SelectedItem.ToString();
        }
        else
        {
            selectedItem.Text =
                "Selected item: null";
        }
        selectedIndex.Text =
            "Selected index: " + listView1.SelectedIndex.ToString();
        selectedItemCount.Text =
            "Items selected: " + listView1.SelectedItems.Count.ToString();
        addedItems.Text =
            "Added: " + e.AddedItems.Count.ToString();
        removedItems.Text =
            "Removed: " + e.RemovedItems.Count.ToString();
    }
    

    클릭 모드

    사용자가 단추 및 기타 항목을 선택하는 대신 클릭할 수 있도록 목록 보기를 변경할 수 있습니다. 예를 들어 사용자가 목록 또는 표에서 항목을 클릭할 때 앱이 새 페이지를 여는 경우에 유용합니다.

    이 동작을 사용하도록 설정하려면:

    • SelectionMode를 None으로 설정합니다.
    • IsItemClickEnabled를 True설정합니다.
    • 사용자가 항목을 클릭할 때 항목을 수행하도록 ItemClick 이벤트를 처리합니다.

    클릭 가능한 항목이 있는 목록 보기는 다음과 같습니다. ItemClick 이벤트 처리기의 코드는 앱에서 새 페이지를 엽니다.

    <ListView SelectionMode="None"
              IsItemClickEnabled="True"
              ItemClick="ListView1_ItemClick">
        <x:String>Page 1</x:String>
        <x:String>Page 2</x:String>
        <x:String>Page 3</x:String>
        <x:String>Page 4</x:String>
        <x:String>Page 5</x:String>
    </ListView>
    
    private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
    {
        switch (e.ClickedItem.ToString())
        {
            case "Page 1":
                this.Frame.Navigate(typeof(Page1));
                break;
    
            case "Page 2":
                this.Frame.Navigate(typeof(Page2));
                break;
    
            case "Page 3":
                this.Frame.Navigate(typeof(Page3));
                break;
    
            case "Page 4":
                this.Frame.Navigate(typeof(Page4));
                break;
    
            case "Page 5":
                this.Frame.Navigate(typeof(Page5));
                break;
    
            default:
                break;
        }
    }
    

    프로그래밍 방식으로 항목 범위 선택

    경우에 따라 프로그래밍 방식으로 ListView 항목 선택을 조작해야 할 수 있습니다. 예를 들어 사용자가 목록의 모든 항목을 선택할 수 있도록 모든 항목 선택 단추를 표시할 수 있습니다. 이 경우 일반적으로 SelectedItems 컬렉션에서 항목을 하나씩 추가하고 제거하는 것이 매우 효율적이지 않습니다. 각 항목 변경으로 인해 SelectionChanged 이벤트가 발생하며, 인덱스 값을 사용하는 대신 항목으로 직접 작업하면 항목이 가상화되지 않습니다.

    SelectAll, SelectRange 및 DeselectRange 메서드를 사용하여 SelectedItems 속성을 사용하는 것보다 선택을 수정하는 것이 더 효율적입니다. 이러한 메서드는 항목 인덱스의 범위를 사용하여 항목을 선택(또는 선택 취소)합니다. 인덱스만 사용되므로 가상화된 항목기본 가상화됩니다. 지정된 범위의 모든 항목은 원래 선택 상태에 관계없이 선택되거나 선택 취소됩니다. SelectionChanged 이벤트는 이러한 메서드를 호출할 때마다 한 번만 발생합니다.

    Important

    SelectionMode 속성이 Multiple 또는 Extended로 설정된 경우에만 이러한 메서드를 호출해야 합니다. SelectionMode가 Single 또는 None때 SelectRange를 호출하면 예외가 throw됩니다.

    인덱스 범위를 사용하여 항목을 선택하는 경우 SelectedRanges 속성을 사용하여 목록에서 선택한 모든 범위를 가져옵니다.

    ItemsSource 속성이 IItemsRangeInfo를 구현하고 이러한 메서드를 사용하여 선택을 수정하는 경우 SelectionChangedEventArgs에서 AddedItems 및 RemovedItems 속성이 설정되지 않습니다. 이러한 속성을 설정하려면 항목 개체의 가상화를 해제해야 합니다. 대신 SelectedRanges 속성을 사용하여 항목을 가져옵니다.

    SelectAll 메서드를 호출하여 컬렉션의 모든 항목을 선택할 수 있습니다. 그러나 모든 항목을 선택 취소하기 위한 메서드는 없습니다. DeselectRange를 호출하고 FirstIndex 값이 0이고 Length 값이 컬렉션의 항목 수와 같은 ItemIndexRange를 전달하여 모든 항목을 선택 취소할 수 있습니다. 다음은 모든 항목을 선택하는 옵션과 함께 다음 예제에 나와 있습니다.

    <StackPanel Width="160">
        <Button Content="Select all" Click="SelectAllButton_Click"/>
        <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
        <ListView x:Name="listView1" SelectionMode="Multiple">
            <x:String>Apricot</x:String>
            <x:String>Banana</x:String>
            <x:String>Cherry</x:String>
            <x:String>Orange</x:String>
            <x:String>Strawberry</x:String>
        </ListView>
    </StackPanel>
    
    private void SelectAllButton_Click(object sender, RoutedEventArgs e)
    {
        if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
            listView1.SelectionMode == ListViewSelectionMode.Extended)
        {
            listView1.SelectAll();
        }
    }
    
    private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
    {
        if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
            listView1.SelectionMode == ListViewSelectionMode.Extended)
        {
            listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
        }
    }
    

    선택한 항목의 모양을 변경하는 방법에 대한 자세한 내용은 항목 컨테이너 및 템플릿을 참조하세요.

    끌어서 놓기

    ListView 및 GridView 컨트롤은 자체 컨트롤 내에서, 그리고 자신과 다른 ListView 및 GridView 컨트롤 간에 항목을 끌어서 놓을 수 있도록 지원합니다. 끌어서 놓기 기능을 구현하는 방법에 대한 자세한 내용은 끌어서 놓기 기능을 참조하세요.

    샘플 코드 가져오기