WPF Group에서 Category 또는 Group별로 표시 하는 방법

WPF DataGrid에서 그룹별로 데이터를 표시하려면 CollectionViewSource를 사용하여 데이터를 그룹화할 수 있습니다. GroupStyle을 적용하면 그룹별 헤더를 만들 수도 있습니다.

 

1. CollectionViewSource를 사용한 데이터 그룹화

먼저, CollectionViewSource를 활용하여 데이터를 그룹화합니다.

<Window.Resources>
    <CollectionViewSource x:Key="GroupedData" Source="{Binding Data}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Category"/>
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
</Window.Resources>

위 코드에서 PropertyGroupDescription을 사용하여 "Category" 속성을 기준으로 그룹화합니다.

2. DataGrid에서 그룹별 표시하기

이제 DataGrid에 ItemsSource를 CollectionViewSource로 설정하고 GroupStyle을 사용하여 헤더를 표시할 수 있습니다.

<DataGrid ItemsSource="{Binding Source={StaticResource GroupedData}}" AutoGenerateColumns="False">
    <DataGrid.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </DataGrid.GroupStyle>

    <DataGrid.Columns>
        <DataGridTextColumn Header="항목명" Binding="{Binding ItemName}"/>
        <DataGridTextColumn Header="가격" Binding="{Binding Price}"/>
    </DataGrid.Columns>
</DataGrid>

이렇게 하면 "Category" 속성 기준으로 그룹이 생성되고, 각 그룹의 Name 값이 헤더로 표시됩니다.

3. 예제 데이터 모델

위 방법을 적용하려면 다음과 같은 데이터 모델이 필요합니다.

public class Item
{
    public string Category { get; set; }
    public string ItemName { get; set; }
    public decimal Price { get; set; }
}

public class ViewModel
{
    public ObservableCollection<Item> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Item>
        {
            new Item { Category = "전자제품", ItemName = "노트북", Price = 1500000 },
            new Item { Category = "전자제품", ItemName = "스마트폰", Price = 1200000 },
            new Item { Category = "의류", ItemName = "청바지", Price = 50000 },
            new Item { Category = "의류", ItemName = "티셔츠", Price = 30000 },
        };
    }
}

이렇게 하면 DataGrid가 전자제품, 의류 등의 그룹을 생성하고, 각 그룹 내에서 데이터를 표시할 수 있습니다.