CODEWITHSUNDEEP
c#wpfdatagrid
mamur
mamur

Reputation: 93

DataGridTemplateColumn Column Span in DataGrid WPF

I am making UI as shown in picture below.

DataGrid It is a DataGrid, Itemsource is bound to a List. I cannot set ColumnSpan for the TextBox. First, I tried it with a UserControl but I couldn't fix DataGridTemplateColumn Header, then I tried DataGridTemplateColumn.CellTemplate but couldn't set the ColumnSpan.

Is there any way/method to make this kind of Datagrid?

Thank you in advance.

Upvotes: 6

Views: 7384

Answers (3)

Jae Hwan Kim
Jae Hwan Kim

Reputation: 111

DataGrid is not suitable for what you want. You had better use ListView or ListBox and datatemplate. By using them, you can show every kind of data in the way you want without DataGrid.

If you are not familiar with listview and datatemplete, please see the link below. https://www.wpftutorial.net/ListBoxDataTemplate.html

Upvotes: 1

mamur
mamur

Reputation: 93

I have come with other solution using Grids, List and UserControl. In a simple way, I made it as following: enter image description here

Upvotes: 0

jHilscher
jHilscher

Reputation: 1868

There is no ColumnSpan in the DataGrid, like in the normal Grid.

To get this kind of layout you have 3 choices, all with heavy drawbacks unfortunately.

1 merge cells

Use the merge event to merge cells together in code behind. See a guide to this here This requires a large chunk of code behind coding to get this right with your layout. So I would really advise against this.

2 RowDetails

Use the build in RowDetails. This doesn't get the layout exactly like your's but is the easiest and closest build in function to your requirement.

It will look something like this:

Row Template

It's easy to configure: Set: RowDetailsVisibilityMode="Visible" in the DataGrid XAML. And define your template for the row:

<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Desc}" Background="LightGray"/>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

[+] All DataGrid functions will work: Sorting, Adding Rows, Resizing ...

[-] The Details section span over the whole row.

See this tutorial about what you can do with row details.

3 Hack something together

With templates and code behindz. Some resources that might help you:

Upvotes: 3

Related Questions