방법: GridView를 구현하는 ListView의 항목 그룹화

  • 아티클

이 예제에서는 ListView 컨트롤의 GridView 보기 모드에서 항목 그룹을 표시하는 방법을 보여 줍니다.

예제

ListView에서 항목 그룹을 표시하려면 CollectionViewSource를 정의합니다. 다음 예제에서는 Catalog 데이터 필드의 값에 따라 데이터 항목을 그룹화하는 CollectionViewSource를 보여 줍니다.

<CollectionViewSource x:Key='src' 
                      Source="{Binding Source={StaticResource MyData}, 
                               XPath=Item}">
  <CollectionViewSource.GroupDescriptions>
    <PropertyGroupDescription PropertyName="@Catalog" />
  </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

다음 예제에서는 이전 예제에서 정의하는 CollectionViewSource에 대한 ListView에 대해 ItemsSource를 설정합니다. 이 예제에서는 Expander 컨트롤을 구현하는 GroupStyle도 정의합니다.

<ListView ItemsSource='{Binding Source={StaticResource src}}' 
          BorderThickness="0">
  <ListView.GroupStyle>
    <GroupStyle>
      <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">
          <Setter Property="Margin" Value="0,0,0,5"/>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type GroupItem}">
                <Expander IsExpanded="True" BorderBrush="#FFA4B97F" 
                          BorderThickness="0,0,0,1">
                  <Expander.Header>
                    <DockPanel>
                      <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" 
                                 Margin="5,0,0,0" Width="100"/>
                      <TextBlock FontWeight="Bold" 
                                 Text="{Binding Path=ItemCount}"/>
                    </DockPanel>
                  </Expander.Header>
                  <Expander.Content>
                    <ItemsPresenter />
                  </Expander.Content>
                </Expander>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </GroupStyle.ContainerStyle>
    </GroupStyle>
  </ListView.GroupStyle>

</ListView>

참고 항목