Custom WPF control

Question

I am creating a custom control in WPF 4.0 that is going to look something like the image below. It basically consists of "swim lanes". Each ItemsControl has elements that can be dragged and dropped, with a visual render of the item, within the same row on every element except for the row header. There are a fixed number of columns and a variable number of rows.

I was thinking of two different approaches to this problem:

1. Use a DataGrid and heavily modify it so that it will support this behaviour.

2. Create a grid with a dynamic number of rows and implement each item as group of 5 controls (one for each column).

Considerations: Using MVVM, the whole thing should be able to bind to a list.

What would be the most reasonable approach in this situation?

Please comment if anything is unclear!

Answer 1

If you want to use a wpf datagrid it's not hard to achieve your desired layout if you use TemplateColumn s for your columns 2-5:

<dg:DataGridTemplateColumn Header="....">
    <dg:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <!-- your custom control -->
        </DataTemplate>
    </dg:DataGridTemplateColumn.CellEditingTemplate>
    <dg:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <!-- ... -->
        </DataTemplate>
    </dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>

Items source for the grid can be a simple List/ObservableCollection.

However, you will still have to implement a drag&drop mechanism yourself.

Answer 2

So it sounds like you have several "controls" that you should build that will make this larger, composite control easier to manage.

The bulk of the complicated behavior you have is enforcing drag and drop across items controls within a given row (really the complicated part is restricting drops on items controls in other rows)

So first I would build a ItemsControlGroup control. Something similar to say a radio group where each control is part of a similar group. You might be able to do this with simply an attached property for the group name. That will give you a way to figure out if the target is a valid drop location for the given item being dragged.

Building all of that should be distinct from building this "swim lane" layout you are after.

Once you have the items control drag and drop working then you can build the layout several different ways.

A DataGrid actually might not be too hard to work with at this point, like Zebi pointed out.

You could also get away with a set of nested stack panels or some sort of grid layout. Layout will be the easy part.