18

I want to create a WPF datagrid that spans over multiple rows in one column. Like this:

+-------+----------------+
| Name  | Attributes     |
+-------+----------------+
|       | Horse Power    |
| BMW   +----------------+
|       | Color          |
+-------+----------------+
|       | Weight         |
| Ford  +----------------+
|       | Color          |
+-------+----------------+

How can the following code be changed to get it done?

<DataGrid AutoGenerateColumns="False">
     <DataGrid.Columns>
          <DataGridTextColumn Header="Name" />
          <DataGridTextColumn Header="Attributes" />
     </DataGrid.Columns>
</DataGrid>
3
  • Is there a reason you have to use a DataGrid for this? This looks simple enough that you should be able to do it in a ListView more easily, with customized ListViewItems.
    – Gjeltema
    Jun 19, 2013 at 22:58
  • I think a ListView would work too. The real thing has more columns, they will be colored on click of specific cells and so on...
    – juergen d
    Jun 20, 2013 at 1:07
  • I'm not the biggest fan of the ListView myself, but for the customizations that you're looking for, I think it would be the preferable choice. I've found that the DataGrid (even 3rd party DataGrid controls) aren't easily able to do things like "multi-row column cells".
    – Gjeltema
    Jun 20, 2013 at 3:07

3 Answers 3

11

Try use DataGridTemplateColumn. I created sample test class for databinding

public class Test
{

    public Test(string name, string attribute1, string attribute2)
    {
        Name = name;
        Attributes = new Attribute(attribute1, attribute2);
    }

    public string Name { get; set; }
    public Attribute Attributes { get; set; }
}

public class Attribute
{

    public Attribute(string attribute1, string attribute2)
    {
        Attribute1 = attribute1;
        Attribute2 = attribute2;
    }

    public string Attribute1 { get; set; }
    public string Attribute2 { get; set; }
}

And a datagrid in xaml

<DataGrid AutoGenerateColumns="False"  Name="dataGrid1" ItemsSource="{Binding}">
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Name"  >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding Path=Name}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                        </Grid>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Header="Attributes"  >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50*"/>
                                <RowDefinition />
                                <RowDefinition Height="50*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="{Binding Path=Attributes.Attribute1}" VerticalAlignment="Center" Margin="3,3,3,3"/>
                            <Line Grid.Row="1" Stroke="Black" Stretch="Fill" X2="1" VerticalAlignment="Center"/>
                            <TextBlock Grid.Row="2" Text="{Binding Path=Attributes.Attribute2}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                        </Grid>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

And fill it in code-behind

List<Test> list = new List<Test>();
//populate list with your data here
dataGrid1.DataContext = list;
2
  • This works but note that once you use DataGridTemplateColumn Copy/Paste no longer works across rows or columns.
    – Kelly
    Sep 14, 2014 at 22:02
  • 2
    What if the number of attributes are dynamic, sometimes 2, sometimes 4 ? How can it be rendered ? Dec 3, 2015 at 8:13
3

I managed to implement a solution that does what you want with three levels of grouping with one small issue, in that that the Group Headers scroll horizontally with the data.

    <Style x:Key="GroupItemStyle" TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                        <StackPanel Orientation="Horizontal" >
                            <Border BorderThickness="0">
                                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <Border BorderThickness="1" MinWidth="150">
                                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <ContentPresenter Content="{Binding Name}" >
                                            </ContentPresenter>
                                        </Grid>

                                    </Border>
                                    <Border BorderThickness="0" Grid.Column="1">
                                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <ItemsPresenter/>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </Border>
                        </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And the Grid:

            <DataGrid ItemsSource="{Binding GroupedData}" AutoGenerateColumns="False" MinRowHeight="25" CanUserAddRows="False" CanUserDeleteRows="False">
                <DataGrid.GroupStyle>
                    <!-- First Group -->
                    <GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <DataGridRowsPresenter/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>

                    <!-- Second Group -->
                    <GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <DataGridRowsPresenter/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>

                    </GroupStyle>

                    <!-- Third Group -->
                    <GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <DataGridRowsPresenter/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </DataGrid.GroupStyle>
                <DataGrid.Columns>
        ...
                </DataGrid.Columns>
            </DataGrid>
-2

Another helpful article on the subject is http://www.mindstick.com/Articles/90371ed3-c0f7-49eb-ba2d-9d1f2c9b14e2/?Grid%20Control%20in%20WPF:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button x:Name="btn1" Content="First Button" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
    <Button x:Name="btn2" Content="Second Button" Grid.Row="0" Grid.Column="2" />
    <Button x:Name="btn3" Content="Thired Button" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" />
    <Button x:Name="btn4" Content="Fourth Button" Grid.Row="1" Grid.Column="1" />
    <Button x:Name="btn5" Content="Fifth Button" Grid.Row="1" Grid.Column="2" />
    <Button x:Name="btn6" Content="Six Button" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />

Notice the Grid.ColumnSpan and Grid.RowSpan attributes.

1
  • 9
    This appears to be about the layout grid, not the DataGrid
    – peterG
    Dec 18, 2014 at 0:28

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.