c# - Merge Cells in WPF DataGrid

Question

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>

Answer 1

使ってみてくださいDataGridTemplateColumn。データバインディング用のサンプルテストクラスを作成しました

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; }
}

そして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>

コードビハインドに入力します

List<Test> list = new List<Test>();
//populate list with your data here
dataGrid1.DataContext = list;

Answer 2

この件に関する別の役立つ記事は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" />

Grid.ColumnSpanおよびGrid.RowSpan属性に注意してください。