ListView 개요

아티클
08/20/2008

업데이트: 2007년 11월

ListView 컨트롤은 데이터 항목 집합을 여러 레이아웃이나 뷰에 표시하기 위한 인프라를 제공합니다. 예를 들어 사용자가 데이터 항목을 표에 표시하고 열을 정렬해야 할 수 있습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

ListView 정의
ListView의 뷰 모드 정의
ListView에 데이터 바인딩
GridView를 구현하는 ListView에 스타일 지정
같은 뷰 모드 공유
사용자 지정 뷰 모드 만들기
관련 항목

ListView 정의

ListView 컨트롤은 ListBox에서 파생된 ItemsControl입니다. 일반적으로 이 컨트롤의 항목은 데이터 컬렉션의 멤버이며 ListViewItem 개체로 표현됩니다. ListViewItem은 ContentControl이며 하나의 자식 요소만 포함할 수 있습니다. 하지만 자식 요소는 모든 시각적 요소가 될 수 있습니다.

ListView의 뷰 모드 정의

ListView 컨트롤의 콘텐츠에 대한 뷰 모드를 지정하려면 View 속성을 설정합니다. WPF(Windows Presentation Foundation)에서 제공하는 뷰 모드 중 하나는 GridView로 이 모드에서는 열을 사용자 지정할 수 있는 표에 데이터 항목 컬렉션을 표시합니다.

다음 예제에서는 직원 정보를 표시하는 ListView 컨트롤의 GridView를 정의하는 방법을 보여 줍니다. 전체 샘플을 보려면 GridView를 사용하는 ListView 샘플을 참조하십시오.

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name" Width="100"/>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                      Width="100">
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No." Width="100"/>
    </GridView>

  </ListView.View>
</ListView>

다음 그림에서는 이전 예제의 데이터가 어떻게 표시되는지 보여 줍니다.

GridView 출력이 있는 ListView

ViewBase 클래스에서 상속되는 클래스를 정의하여 사용자 지정 뷰 모드를 만들 수 있습니다. 사용자 지정 뷰를 만드는 데 필요한 인프라는 ViewBase 클래스에서 제공합니다. 사용자 지정 뷰를 만드는 방법에 대한 자세한 내용은 방법: ListView의 사용자 지정 뷰 모드 만들기를 참조하십시오.

ListView에 데이터 바인딩

Items 및 ItemsSource 속성을 사용하여 ListView 컨트롤에 대한 항목을 지정합니다. 다음 예제에서는 ItemsSource 속성을 EmployeeInfoDataSource라는 데이터 컬렉션으로 설정합니다. 전체 샘플을 보려면 GridView를 사용하는 ListView 샘플을 참조하십시오.

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

GridView에서 GridViewColumn 개체는 지정된 데이터 필드에 바인딩됩니다. 다음 예제에서는 DisplayMemberBinding 속성에 대해 Binding을 지정하여 GridViewColumn 개체를 데이터 필드에 바인딩합니다. 전체 샘플을 보려면 GridView를 사용하는 ListView 샘플을 참조하십시오.

GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;

<GridViewColumn DisplayMemberBinding=
                    "{Binding Path=FirstName}" 
                Header="First Name" Width="100"/>

열의 셀에 스타일을 지정하기 위해 DataTemplate을 정의하는 과정에서 Binding을 지정할 수도 있습니다. 다음 예제에서는 ResourceKey로 식별되는 DataTemplate에서 GridViewColumn에 대한 Binding을 설정합니다. 이 예제에서는 DisplayMemberBinding을 정의하지 않습니다. 정의하는 경우 DataTemplate으로 지정된 바인딩이 재정의되기 때문입니다. 전체 샘플을 보려면 템플릿이 있는 GridView를 사용하는 ListView 샘플을 참조하십시오.

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

<GridViewColumn Header="Month" Width="80"
      HeaderContainerStyle="{StaticResource myHeaderStyle}"
      HeaderTemplate="{StaticResource myHeaderTemplate}"
      DisplayMemberBinding="{Binding Path=Month}"/>

GridView를 구현하는 ListView에 스타일 지정

ListView 컨트롤에는 표시되는 데이터 항목을 나타내는 ListViewItem 개체가 포함됩니다. 다음 속성을 사용하여 데이터 항목의 콘텐츠와 스타일을 정의할 수 있습니다.

ListView 컨트롤에서는 ItemTemplate, ItemTemplateSelector 및 ItemContainerStyle 속성을 사용합니다.
ListViewItem 컨트롤에서는 ContentTemplate 및 ContentTemplateSelector 속성을 사용합니다.

GridView에서 셀 사이의 정렬 문제가 발생하지 않도록 ItemContainerStyle을 사용하여 속성을 설정하거나 ListView의 항목 너비에 영향을 주는 콘텐츠를 추가하지 마십시오. 예를 들어 ItemContainerStyle에서 Margin 속성을 설정하면 정렬 문제가 발생할 수 있습니다. GridView에 있는 항목 너비에 영향을 주는 콘텐츠를 정의하거나 속성을 지정하려면 GridView 클래스 속성 및 GridViewColumn 등의 관련 클래스 속성을 사용하십시오.

GridView 및 지원 클래스를 사용하는 방법에 대한 자세한 내용은 GridView 개요를 참조하십시오.

ListView 컨트롤에 대한 ItemContainerStyle을 정의하고 ItemTemplate도 정의하는 경우에는 스타일에 ContentPresenter를 포함해야 ItemTemplate이 제대로 작동합니다.

GridView를 사용하여 표시되는 ListView 콘텐츠에 HorizontalContentAlignment 및 VerticalContentAlignment 속성을 사용하지 마십시오. GridView의 열 콘텐츠 정렬을 지정하려면 CellTemplate을 정의하십시오.

같은 뷰 모드 공유

두 개의 ListView 컨트롤이 동시에 같은 뷰 모드를 공유할 수 없습니다. 둘 이상의 ListView 컨트롤에 같은 뷰 모드를 사용하려고 하면 예외가 발생합니다.

둘 이상의 ListView가 동시에 사용할 수 있는 뷰 모드를 지정하려면 템플릿이나 스타일을 사용하십시오. 뷰를 Resources로 정의하는 방법에 대한 예제를 보려면 여러 뷰가 있는 ListView 샘플을 참조하십시오.

사용자 지정 뷰 모드 만들기

GridView와 같은 사용자 지정 뷰는 ListViewItem 개체로 표현되는 데이터 항목을 표시하기 위한 도구를 제공하는 ViewBase 추상 클래스에서 파생됩니다.

사용자 지정 뷰 모드의 예제를 보려면 여러 뷰가 있는 ListView 샘플을 참조하십시오.

참고 항목

다음을 통해 공유