WPF 컬렉션 바인딩 과 그룹, 필터 및 정렬

WPF 컬렉션 바인딩 과 필터 및 정렬

모델

ComboBox에서 보기 좋은 출력을 위해 DisplayName 을 추가 한다.

public class ProductType

{

    public string ProductTypeId { get; set; }

    public string ProductTypeName { get; set; }

    public string GroupName { get; set; }

    public string DisplayName

    {

        get { return $"{this.GroupName}, {this.ProductTypeName}"; }

    }

}

public class Product

{

    public string ProductId { get; set; }

    public string ProductName { get; set; }

    public int Price { get; set; }

    public string ProductTypeId { get; set; }

}

컬렉션 객체

ObservableCollection<ProductType> productTypes = new ObservableCollection<ProductType>();

ObservableCollection<Product> products = new ObservableCollection<Product>();

productTypes.Add(new ProductType() { ProductTypeId = "1", ProductTypeName = "Server", GroupName = "Month" });

productTypes.Add(new ProductType() { ProductTypeId = "2", ProductTypeName = "Desktop", GroupName = "Month" });

productTypes.Add(new ProductType() { ProductTypeId = "3", ProductTypeName = "Server", GroupName = "Permanent" });

productTypes.Add(new ProductType() { ProductTypeId = "4", ProductTypeName = "Desktop", GroupName = "Permanent" });

products.Add(new Product() { ProductId = "1", ProductName = "Azure SQL", Price = 250, ProductTypeId = "1" });

products.Add(new Product() { ProductId = "2", ProductName = "Azure Web App", Price = 222, ProductTypeId = "1" });

products.Add(new Product() { ProductId = "3", ProductName = "Office 365", Price = 600, ProductTypeId = "2" });

products.Add(new Product() { ProductId = "4", ProductName = "OneDrive", Price = 100, ProductTypeId = "2" });

View - 정렬 및 그룹

var productTypeView = CollectionViewSource.GetDefaultView(productTypes);

productTypeView.SortDescriptions.Add(new System.ComponentModel.SortDescription(nameof(ProductType.ProductTypeName), System.ComponentModel.ListSortDirection.Ascending));

productTypeView.GroupDescriptions.Add(new PropertyGroupDescription(nameof(ProductType.GroupName)));

View - 필터 및 정렬

Price 가 300 이하인 DataGrid 와 미만인 DataGrid 두개를 만들 것이다.
Price 업데이트 시 적용을 필터를 바로 적용하기 위하여 IsLiveFilteringRequested = true 를 사용하며 LiveFilteringProperties 에 Price 를 추가한다.

CollectionViewSource viewSource1 = new CollectionViewSource();

CollectionViewSource viewSource2 = new CollectionViewSource();

viewSource1.Source = this.products;

viewSource1.IsLiveFilteringRequested = true;

viewSource1.LiveFilteringProperties.Add(nameof(Product.Price));

viewSource1.View.Filter = (i) => (i as Product).Price <= 300;

viewSource2.Source = this.products;

viewSource2.IsLiveFilteringRequested = true;

viewSource2.LiveFilteringProperties.Add(nameof(Product.Price));

viewSource2.View.Filter = (i) => (i as Product).Price > 300;

소스 Binding

this.productTypeComboBox.ItemsSource = productTypeView;

this.gridProductTypeComboLowPrice.ItemsSource = productTypeView;

this.gridProductTypeComboHighPrice.ItemsSource = productTypeView;

this.dataGridLowPrice.ItemsSource = viewSource1.View;

this.dataGridHighPrice.ItemsSource = viewSource2.View;

Xaml

ComboBox는 그룹헤더로 구분 되여 출력을 한다.

<ComboBox Name="productTypeComboBox">

    <ComboBox.GroupStyle>

        <GroupStyle>

            <GroupStyle.HeaderTemplate>

                <DataTemplate>

                    <TextBlock Text="{Binding Name}"/>

                </DataTemplate>

            </GroupStyle.HeaderTemplate>

        </GroupStyle>

    </ComboBox.GroupStyle>

    <ComboBox.ItemTemplate>

        <DataTemplate>

            <TextBlock Text="{Binding ProductTypeName}"></TextBlock>

        </DataTemplate>

    </ComboBox.ItemTemplate>

</ComboBox>

DataGrid 에서 ProductType은 DisplayName을 출력 한다.
Price 300 이하은 DataGrid는 오름차순 정렬을 하고 초과하는 DataGrid는 내림차순 졍렬을 한다.
SelectedValueBinding, SelectedValuePath 두개의 속성으로 항목을 매핑을 하고 DisplayMemberPath로 표시 속성을 설정 한다.

<DataGrid Name="dataGridLowPrice" AutoGenerateColumns="False" >

    <DataGrid.Columns>

        <DataGridTextColumn Header="ProductName" Binding="{Binding ProductName}" />

        <DataGridTextColumn Header="Price" Binding="{Binding Price}" SortDirection="Ascending" />

        <DataGridComboBoxColumn x:Name="gridProductTypeComboLowPrice" Header="ProductType" SelectedValueBinding="{Binding ProductTypeId}" SelectedValuePath="ProductTypeId" DisplayMemberPath="DisplayName" />

    </DataGrid.Columns>

</DataGrid>                    

<DataGrid Name="dataGridHighPrice" AutoGenerateColumns="False" >

    <DataGrid.Columns>

        <DataGridTextColumn Header="ProductName" Binding="{Binding ProductName}" />

        <DataGridTextColumn Header="Price" Binding="{Binding Price}" SortDirection="Descending" />

        <DataGridComboBoxColumn x:Name="gridProductTypeComboHighPrice" Header="ProductType" SelectedValueBinding="{Binding ProductTypeId}" SelectedValuePath="ProductTypeId" DisplayMemberPath="DisplayName" />

    </DataGrid.Columns>

</DataGrid> 

결과 화면

ComboBox Group 적용

DataGrid ComboBox DisplayName적용