WPF DataGrid display multiple types

Question

What is the best way to display multiple types of data in a WPF datagrid. For example for categories and products:

| Product Name | Description  | Price |
---------------------------------------
IT  - category
---------------------------------------
  Monitors - category
---------------------------------------
| Monitor 1    | ...          | 100 $ |
| Monitor 2    | ...          |  99 $ |
| Monitor 3    | ...          | 120 $ |
---------------------------------------
  HDD - category
---------------------------------------
| Hdd 1        | ...          | 50 $ |
| Hdd 2        | ...          | 45 $ |
---------------------------------------
Electronics category
---------------------------------------
 ...

I would like to display on top the product columns, and change the template for categories. I know there is a cell template selector, but is there a way to specify a template selector for an entire row? Thank you.

Answer 1

If you create a CollectionViewsource for your data you can use PropertyGroupDescription in the collections GroupDescriptions to group all the data by the property you wish.

Then in the DataGrid you can create a GroupStyle to show a TextBlock or something to separate all your groups in the DataGrid.

Here is a full working demo as its a bit easier to show than explain :)

Xaml:

<Window x:Class="WpfApplication20.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="505" Width="525" Name="UI">

    <Window.Resources>

        <!--Create CollectionViewSource and set the property you want to group by-->
        <CollectionViewSource x:Key="MyItems" Source="{Binding Items, ElementName=UI}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Category" />
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </Window.Resources>

    <Grid>
        <DataGrid ItemsSource="{Binding Source={StaticResource MyItems}}">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <!--Name property is the GroupName created by the CollectionViewSource-->
                                <TextBlock Text="{Binding Path=Name}" Margin="10,0,0,0" FontSize="18" FontWeight="Bold"/>
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Window>

Code:

namespace WpfApplication20
{
    public partial class MainWindow : Window
    {
        private ObservableCollection<MyDataObject> _items = new ObservableCollection<MyDataObject>();

        public MainWindow()
        {
            InitializeComponent();
            Items.Add(new MyDataObject { Category = "IT", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "HDD", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "HDD", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
        }

        public ObservableCollection<MyDataObject> Items
        {
            get { return _items; }
            set { _items = value; }
        }
    }

    public class MyDataObject
    {
        public string Category { get; set; }
        public string ProductName { get; set; }
        public string Description { get; set; }
        public string Price { get; set; }
    }
}

Result:

Enhancement

It may be a nice idea to override the GroupItem template in the DataGrid ContainerStyle to use an Expander, that way you can expand collapse the groups .

Example:

    <DataGrid ItemsSource="{Binding Source={StaticResource MyItems}}" CanUserAddRows="False">
        <DataGrid.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander Name="expander">
                                        <Expander.Header>
                                            <StackPanel >
                                                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                                                <TextBlock Text="{Binding ItemCount, StringFormat={}Items: {0}}" FontSize="9" />
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>
    </DataGrid>

Result: