[WPF] 공공데이터 포털 API 이용 클라이언트 구현 Part 3

그룹핑

ListViewItem 그룹핑 할 수 있습니다.

먼저 CheckBox에 Checked 이벤트를 통해 그룹핑을 추가하고 RemoveChecked 이벤트를 통해 그룹핑을 제거 할 수 있도록 CheckBox를 선언 합니다.

1:            <!-- Group CheckBox -->  
2:            <CheckBox Grid.Column="0"   
3:                 Grid.Row="0"   
4:                 Checked="AddGrouping"   
5:                 Unchecked="RemoveGrouping">Group by Name</CheckBox>  

그룹 스타일 선언

GroupStyle 속성에 ContainerStyle 속성을 이용해 Style을 지정 합니다. Expander 컨트롤을 이용해 아파트명과 그룹 아이템의 개수를 Expander Header에 표시 하도록 ControlTemlate를 선언 합니다.

1:              <!-- Group Style -->  
2:              <ListView.GroupStyle>  
3:                <GroupStyle>  
4:                  <GroupStyle.ContainerStyle>  
5:                    <Style TargetType="{x:Type GroupItem}">  
6:                      <Setter Property="Margin" Value="0,0,0,5" />  
7:                      <Setter Property="Template">  
8:                        <Setter.Value>  
9:                          <ControlTemplate TargetType="{x:Type GroupItem}">  
10:                            <Expander IsExpanded="True" BorderBrush="#FFA4B97F" BorderThickness="0,0,0,1">  
11:                              <Expander.Header>  
12:                                <DockPanel>  
13:                                  <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="Auto" />  
14:                                  <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount, StringFormat=' ({0})'}" />  
15:                                </DockPanel>  
16:                              </Expander.Header>  
17:                              <Expander.Content>  
18:                                <ItemsPresenter />  
19:                              </Expander.Content>  
20:                            </Expander>  
21:                          </ControlTemplate>  
22:                        </Setter.Value>  
23:                      </Setter>  
24:                    </Style>  
25:                  </GroupStyle.ContainerStyle>  
26:                </GroupStyle>  
27:              </ListView.GroupStyle>  

그룹 추가

PropertyGroupDescription 클래스를 생성할 때 그룹핑 하려는 속성을 매개변수로 전달하여  GroupDescriptions 컬렉션에 추가 해 줍니다.

1:      private void AddGrouping(object sender, RoutedEventArgs e)  
2:      {  
3:        CollectionView viewSource = (CollectionView)CollectionViewSource.GetDefaultView(ListView.ItemsSource);  
4:        // view 그룹화 지원 여부  
5:        if (viewSource.CanGroup)  
6:        {  
7:          PropertyGroupDescription description = new PropertyGroupDescription("ApartName");  
8:          viewSource.GroupDescriptions.Add(description);  
9:        }  
10:      }  

그룹 제거

GroupDescription 컬렉션의 요소를 모두 제거 해 줍니다.

1:      private void RemoveGrouping(object sender, RoutedEventArgs e)  
2:      {  
3:        CollectionView viewSource = (CollectionView)CollectionViewSource.GetDefaultView(ListView.ItemsSource);  
4:        viewSource.GroupDescriptions.Clear();  
5:      }  

그룹 데이터 변환

그룹 아이템의 총 거래 금액을 헤더에 표현하려 합니다. IValueConverter를 상속하는 GroupTradeMoneyConveter 클래스를 구현해 보겠습니다.

1:    public class GroupTradeMoneyConverter : IValueConverter  
2:    {  
3:      public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
4:      {  
5:        if (value == null) return null;  
6:        ReadOnlyObservableCollection<object> items = value as ReadOnlyObservableCollection<object>;  
7:        if (items == null) return null;  
8:        long total = items.Sum(i => long.Parse(((TradeApt)i).TradeMoney, NumberStyles.Currency));  
9:        return total;  
10:      }  
11:      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
12:      {  
13:        throw new NotImplementedException();  
14:      }  
15:    }  

Resource 지정

1:    <Window.Resources>  
2:      <local:GroupTradeMoneyConverter x:Key="GroupTradeMoneyConverter" />  
3:    </Window.Resources>  

DockPanel에 Item 추가

그룹 아이템의 거래 금액의 총합을 표시할 TextBlock 컨트롤을 추가 하고 Binding 속성에 Converter를 지정 합니다.

1:                          <ControlTemplate TargetType="{x:Type GroupItem}">  
2:                            <Expander IsExpanded="True" BorderBrush="#FFA4B97F" BorderThickness="0,0,0,1">  
3:                              <Expander.Header>  
4:                                <DockPanel>  
5:                                  <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="Auto" />  
6:                                  <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount, StringFormat=' ({0})'}" />  
7:                                  <TextBlock Text="{Binding Path=Items, Converter={StaticResource GroupTradeMoneyConverter}, StringFormat=' {0:N0}'}" />  
8:                                </DockPanel>  
9:                              </Expander.Header>  
10:                              <Expander.Content>  
11:                                <ItemsPresenter />  
12:                              </Expander.Content>  
13:                            </Expander>  
14:                          </ControlTemplate>  

결과 화면