Another feature that we have with the ListView is grouping. This will allow you to group rows depending on a specific field. This feature can be customized as needed and give your application extreme usefulness visualizing information.
Below you can see a sample with the XAML and the C# code:
<window x:class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="625">
<grid>
<grid.rowdefinitions>
<rowdefinition height="319*"></rowdefinition>
<rowdefinition height="4*"></rowdefinition>
</grid.rowdefinitions>
<listview margin="10,10,10,6" name="BusinessListView">
<listview.view>
<gridview>
<gridviewcolumn header="Company" width="120" displaymemberbinding="{Binding Company}"></gridviewcolumn>
<gridviewcolumn header="Url" width="200" displaymemberbinding="{Binding Url}"></gridviewcolumn>
<gridviewcolumn header="Phone" width="100" displaymemberbinding="{Binding Phone}"></gridviewcolumn>
</gridview>
</listview.view>
<listview.groupstyle>
<groupstyle>
<groupstyle.headertemplate>
<datatemplate>
<textblock fontweight="Bold" fontsize="14" text="{Binding Name}"></textblock>
</datatemplate>
</groupstyle.headertemplate>
</groupstyle>
</listview.groupstyle>
</listview>
</grid>
</window>
namespace WpfApplication2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<business> businesses = new List<business>();
businesses.Add(new Business("Microsoft", "http://www.microsoft.com", "123-421-1231","Enterprise"));
businesses.Add(new Business("SkyXoft", "http://www.skyxoft.com","123-321-1231","SMB"));
businesses.Add(new Business("LicenseSpot", "http://www.licensespot.com", "123-312-3212","SMB"));
BusinessListView.ItemsSource = businesses;
CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(BusinessListView.ItemsSource);
PropertyGroupDescription groupDescription = new PropertyGroupDescription("Size");
view.GroupDescriptions.Add(groupDescription);
}
}
public class Business
{
public string Company { get; set; }
public string Url { get; set; }
public string Phone { get; set; }
public string Size { get; set; }
public Business(string company, string url, string phone, string size)
{
this.Company = company;
this.Url = url;
this.Phone = phone;
this.Size = size;
}
}
}
</business></business>
In this sample we've taken the list of businesses and grouping them based on the size of the company. In the XAML we've just added a GroupStyle to the list view in which a template is defined. This template includes a TextBlock that holds the information for the grouping. It has a different style, a bold, to note the difference. The text property is bound to the Name field but it has nothing to do with the Business object. This Name property holds the name of the group as assigned by WPF.
In the C# code we're just adding the objects to a List but we're also using the CollectionView object which has the ability to group items. We do so by creating a PropertyGroupDescription object and adding it as a GroupDescription in the CollectionView. This tells WPF to group the items using the specified property.
In the previous example, we showed how to group the rows in the ListView. But one common request from end users is to have the ability to expand and collapse the group headers so they can filter the information they see in the screen. In WPF in can't do this by default but we can some templates to do it.
Below you can find the XAML code:
<window x:class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="625">
<grid>
<grid.rowdefinitions>
<rowdefinition height="319*"></rowdefinition>
<rowdefinition height="4*"></rowdefinition>
</grid.rowdefinitions>
<listview margin="10,10,10,6" name="BusinessListView">
<listview.view>
<gridview>
<gridviewcolumn header="Company" width="120" displaymemberbinding="{Binding Company}"></gridviewcolumn>
<gridviewcolumn header="Url" width="200" displaymemberbinding="{Binding Url}"></gridviewcolumn>
<gridviewcolumn header="Phone" width="100" displaymemberbinding="{Binding Phone}"></gridviewcolumn>
</gridview>
</listview.view>
<listview.groupstyle>
<groupstyle>
<groupstyle.containerstyle>
<style targettype="{x:Type GroupItem}"><!--
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="22" />
<TextBlock Text=" (" FontSize="22" Foreground="Gray" FontWeight="Bold"/>
<TextBlock Text="{Binding ItemCount}" FontSize="22" Foreground="Gray" FontWeight="Bold" />
<TextBlock Text=")" FontSize="22" Foreground="Gray" FontWeight="Bold"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
--></style>
</groupstyle.containerstyle> </groupstyle> </listview.groupstyle> </listview> </grid> </window>
There's no need to modify the C# code, we can use the same one. In the XAML code we're just adding the Expander property and setting it to true to show it the ListView. As you can see in the screenshot, we can now group by the size of the company. We also added the number of items inside the group using the ItemCount property which is also available in the group.
With this, you can quickly style the group to your own requirements and build grid interfaces that really provides added value to your users.
