Posted by: Zeeshan Amjad | January 5, 2010

Defining Multi level Group Style


We have already studied how to use group style, now we are going one step ahead and define multi level group style. This program is almost similar to the previous one except now we have one more level of data. Now we are store state, county and city information and perform grouping on state and county level. Here is our class to store this information.

  1: public class StateInfo
  2: {
  3:     public StateInfo(String state, String county, String city, int population)
  4:     {
  5:         State = state;
  6:         County = county;
  7:         City = city;
  8:         Population = population;
  9:     }
 10: 
 11:     public String State
 12:     { get; set; }
 13: 
 14:     public String County
 15:     { get; set; }
 16: 
 17:     public String City
 18:     { get; set; }
 19: 
 20:     public int Population
 21:     { get; set; }
 22: }
 23: 

Now we are defining grouping not only on sate, but also at county level. Here is a piece of code to define multi level grouping.

  1: CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(list.ItemsSource);
  2: 
  3: PropertyGroupDescription group1 = new PropertyGroupDescription("State");
  4: PropertyGroupDescription group2 = new PropertyGroupDescription("County");
  5: view.GroupDescriptions.Add(group1);
  6: view.GroupDescriptions.Add(group2);
  7: 

Our XAML file is almost same as previous one except now we are displaying more information. Here is complete XAML file to display multi level grouping.

  1: <Window x:Class="WpfGroupStyle.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Multi Level Group Style" Height="400" Width="400">
  5:     <Grid>
  6:         <ListBox Margin="5" Name="list" HorizontalContentAlignment="Stretch">
  7:             <ListBox.ItemTemplate>
  8:                 <DataTemplate>
  9:                     <Border Margin="2" CornerRadius="5" Background="Wheat">
 10:                         <Expander Margin="2" ExpandDirection="Down">
 11:                             <StackPanel Margin="2">
 12:                                 <TextBlock Margin="2" Foreground="Black" Text="{Binding Path=City}"/>
 13:                                 <TextBlock Margin="2" Foreground="Black" Text="{Binding Path=Population}"/>
 14:                             </StackPanel>
 15:                         </Expander>
 16:                     </Border>
 17:                 </DataTemplate>
 18:             </ListBox.ItemTemplate>
 19: 
 20:             <ListBox.GroupStyle>
 21:                 <GroupStyle>
 22:                     <GroupStyle.HeaderTemplate>
 23:                         <DataTemplate>
 24:                             <Border Margin="2" BorderBrush="Brown" BorderThickness="1" CornerRadius="5">
 25:                                 <TextBlock Margin="2" FontSize="14" FontWeight="Bold" Foreground="DarkBlue" Text="{Binding Path=Name}"/>
 26:                             </Border>
 27:                         </DataTemplate>
 28:                     </GroupStyle.HeaderTemplate>
 29:                 </GroupStyle>
 30:             </ListBox.GroupStyle>
 31:         </ListBox>
 32:     </Grid>
 33: </Window>
 34: 
 35: 

Here is complete C# code of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace WpfGroupStyle
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             InitializeComponent();
 25: 
 26:             List<StateInfo> stateList = new List<StateInfo>();
 27: 
 28:             stateList.Add(new StateInfo("Maryland", "Frederick", "Frederick", 52767));
 29:             stateList.Add(new StateInfo("Maryland", "Frederick", "Brunswick", 4894));
 30:             stateList.Add(new StateInfo("Maryland", "Frederick", "New Market", 427));
 31:             stateList.Add(new StateInfo("Maryland", "Montgomery", "Rockville", 60734));
 32:             stateList.Add(new StateInfo("Maryland", "Montgomery", "Gaithersburg", 52613));
 33:             stateList.Add(new StateInfo("Taxes", "Harris", "Deer Park", 28520));
 34:             stateList.Add(new StateInfo("Taxes", "Harris", "Jersey Village", 6880));
 35:             stateList.Add(new StateInfo("Taxes", "Dallas", "Irving", 201927));
 36:             stateList.Add(new StateInfo("Taxes", "Dallas", "DeSoto", 37646));
 37:             stateList.Add(new StateInfo("Taxes", "Bexar", "Leon Valley", 9239));
 38:             stateList.Add(new StateInfo("California", "Los Angeles", "Burbank", 100316));
 39:             stateList.Add(new StateInfo("California", "Los Angeles", "Azusa", 44712));
 40:             stateList.Add(new StateInfo("California", "Los Angeles", "Culver City", 38816));
 41:             stateList.Add(new StateInfo("California", "Los Angeles", "Glendale", 194973));
 42:             stateList.Add(new StateInfo("California", "Sacramento", "Citrus Heights", 85071));
 43:             stateList.Add(new StateInfo("California", "Sacramento", "Elk Grove", 59984));
 44: 
 45:             list.ItemsSource = stateList;
 46: 
 47:             CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(list.ItemsSource);
 48: 
 49:             PropertyGroupDescription group1 = new PropertyGroupDescription("State");
 50:             PropertyGroupDescription group2 = new PropertyGroupDescription("County");
 51:             view.GroupDescriptions.Add(group1);
 52:             view.GroupDescriptions.Add(group2);
 53:         }
 54:     }
 55: 
 56:     public class StateInfo
 57:     {
 58:         public StateInfo(String state, String county, String city, int population)
 59:         {
 60:             State = state;
 61:             County = county;
 62:             City = city;
 63:             Population = population;
 64:         }
 65: 
 66:         public String State
 67:         { get; set; }
 68: 
 69:         public String County
 70:         { get; set; }
 71: 
 72:         public String City
 73:         { get; set; }
 74: 
 75:         public int Population
 76:         { get; set; }
 77:     }
 78: }
 79: 

This would be the output of this program.

GroupStyleOutput_02

Advertisements

Responses

  1. […] Now we are going to study how can we apply group style conditionally. We have already discussed multi level group style. In that program we display the same style for state and county level grouping. Now we are going to […]

  2. […] already few examples of using GroupStyle here, here and here. This time we are going to apply the group style in listview not in listbox. In our first […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: