Posted by: Zeeshan Amjad | January 3, 2010

Using Group Style


We have already used different control to display data differently. Now we are going to use grouping the data using GroupStyle class. This class is directly inherited by Object class and define all the required properties and methods for grouping. Here is a class diagram of group style class.

GroupStyle

Now we are going to define the group style. We define the same state class to store information about state and their cities. Here we define the group style to make grouping on the basis of state. Here is XAML piece of code for making group.

  1: <ListBox.GroupStyle>
  2: 	<GroupStyle>
  3: 		<GroupStyle.HeaderTemplate>
  4: 			<DataTemplate>
  5: 				<Border Margin="2" BorderBrush="Brown" BorderThickness="1" CornerRadius="5">
  6: 					<TextBlock Margin="2" FontSize="14" FontWeight="Bold" Foreground="DarkBlue" Text="{Binding Path=Name}"/>
  7: 				</Border>
  8: 			</DataTemplate>
  9: 		</GroupStyle.HeaderTemplate>
 10: 	</GroupStyle>
 11: </ListBox.GroupStyle>
 12: 

Here is a piece of code to define the groping on the basis of state.

  1: CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(list.ItemsSource);
  2: 
  3: PropertyGroupDescription group = new PropertyGroupDescription("State");
  4: view.GroupDescriptions.Add(group);
  5: 

Here first we are getting the view of listbox and type cast this class as CollectionView class. CollectionView class is inherited by DependencyObject and there are three more classes inherited by this. Here is a class diagram of CollectionView class.

CollectionViewSource

Then we create an object of PropertyGroupDescription class and set its property name property. We can also pass the grouping property name by passing as a parameter into the constructor. Here is a class diagram of PropertyGroupDescription.

GroupDescription

Here is a complete XAML code of the program.

  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="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:                         <StackPanel>
 11:                             <TextBlock Margin="2" Foreground="Black" Text="{Binding Path=City}"/>
 12:                         </StackPanel>
 13:                     </Border>
 14:                 </DataTemplate>
 15:             </ListBox.ItemTemplate>
 16:             
 17:             <ListBox.GroupStyle>
 18:                 <GroupStyle>
 19:                     <GroupStyle.HeaderTemplate>
 20:                         <DataTemplate>
 21:                             <Border Margin="2" BorderBrush="Brown" BorderThickness="1" CornerRadius="5">
 22:                                 <TextBlock Margin="2" FontSize="14" FontWeight="Bold" Foreground="DarkBlue" Text="{Binding Path=Name}"/>
 23:                             </Border>
 24:                         </DataTemplate>
 25:                     </GroupStyle.HeaderTemplate>
 26:                 </GroupStyle>
 27:             </ListBox.GroupStyle>
 28:         </ListBox>
 29:     </Grid>
 30: </Window>
 31: 

Here is a 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", "Baltimore"));
 29:             stateList.Add(new StateInfo("Maryland", "Frederick"));
 30:             stateList.Add(new StateInfo("Maryland", "Germantown"));
 31:             stateList.Add(new StateInfo("Taxes", "Houston"));
 32:             stateList.Add(new StateInfo("Taxes", "Auston"));
 33:             stateList.Add(new StateInfo("Taxes", "Dallas"));
 34:             stateList.Add(new StateInfo("Taxes", "San Antonio"));
 35:             stateList.Add(new StateInfo("California", "Los Angeles"));
 36:             stateList.Add(new StateInfo("California", "Sacramento"));
 37: 
 38:             list.ItemsSource = stateList;
 39: 
 40:             CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(list.ItemsSource);
 41: 
 42:             PropertyGroupDescription group = new PropertyGroupDescription("State");
 43:             view.GroupDescriptions.Add(group);
 44:         }
 45:     }
 46: 
 47:     public class StateInfo
 48:     {
 49:         public StateInfo(String state, String city)
 50:         {
 51:             State = state;
 52:             City = city;
 53:         }
 54: 
 55:         public String State
 56:         { get; set; }
 57: 
 58:         public String City
 59:         { get; set; }
 60:     }
 61: }
 62: 

Here is the output of this program.

GroupStyleOutput

Advertisements

Responses

  1. […] 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 […]

  2. […] 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 […]


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: