방법: GridView를 구현하는 ListView 행의 스타일 지정

  • 아티클

이 예제에서는 GridViewView 모드를 사용하는 ListView 컨트롤에서 행의 스타일을 지정하는 방법을 보여 줍니다.

예제

ListView 컨트롤에서 ItemContainerStyle을 설정하여 ListView 컨트롤의 행 스타일을 지정할 수 있습니다. ListViewItem 개체로 표시되는 항목의 스타일을 설정합니다. ItemContainerStyle은 행 콘텐츠를 표시하는 데 사용되는 ControlTemplate 개체를 참조합니다.

다음 예제를 추출한 전체 샘플은 XML 데이터베이스에 저장된 노래 정보의 컬렉션을 표시합니다. 데이터베이스의 각 곡에는 순위 필드가 있으며 이 필드의 값은 곡 정보 행의 표시 방법을 지정합니다.

다음 예제는 노래 모음의 노래를 나타내는 ListViewItem 개체에 대한 ItemContainerStyle을 정의하는 방법을 보여 줍니다. ItemContainerStyle은 노래 정보 행을 표시하는 방법을 지정하는 ControlTemplate 개체를 참조합니다.

 <ListView.ItemContainerStyle>
  <Style TargetType="{x:Type ListViewItem}"  >
    <Setter Property="Template"
          Value="{StaticResource Default}"/>
    <Style.Triggers>
      <DataTrigger Binding="{Binding XPath=@Rating}" Value="5">
              <Setter Property="Template" 
              Value="{StaticResource StronglyRecommended}"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding XPath=@Rating}" Value="4">
        <Setter Property="Template" 
              Value="{StaticResource Recommended}"/>
      </DataTrigger>
    </Style.Triggers>
  </Style>
</ListView.ItemContainerStyle>

다음 예제에서는 텍스트 문자열 "Strongly Recommended"를 행에 추가하는 ControlTemplate을 보여 줍니다. 이 템플릿은 ItemContainerStyle에서 참조되며 노래의 등급 값이 5(다섯)일 때 표시됩니다. ControlTemplate에는 행의 내용을 GridView 보기 모드로 정의된 대로 열로 레이아웃하는 GridViewRowPresenter 개체가 포함되어 있습니다.

<ControlTemplate x:Key="StronglyRecommended" 
                 TargetType='{x:Type ListViewItem}'>
  <StackPanel Background="Beige">
    <GridViewRowPresenter Content="{TemplateBinding Content}"
       Columns="{TemplateBinding GridView.ColumnCollection}"/>
    <TextBlock Background="LightBlue" Text="Strongly Recommended" />
  </StackPanel>
</ControlTemplate>

다음 예제는 GridView를 정의합니다.

<ListView.View>
  <GridView ColumnHeaderContainerStyle="{StaticResource MyHeaderStyle}">
    <GridViewColumn Header="Name" 
                    DisplayMemberBinding="{Binding XPath=@Name}" 
                    Width="100"/>
    <GridViewColumn Header="Time" 
                    DisplayMemberBinding="{Binding XPath=@Time}" 
                    Width="80"/>
    <GridViewColumn Header="Artist"  
                    DisplayMemberBinding="{Binding XPath=@Artist}" 
                    Width="80" />
    <GridViewColumn Header="Disk" 
                    DisplayMemberBinding="{Binding XPath=@Disk}"  
                    Width="100"/>
  </GridView>
</ListView.View>

참고 항목