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.

enter image description here

I was thinking of two different approaches to this problem:

Use a DataGrid and heavily modify it so that it will support this behaviour.
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!

I wouldn't use a DataGrid that would involve too much hacking IMO. When you say they can drag and drop you mean the existing items in a given row can be re-ordered within that row? — Brad Cunningham
– Brad Cunningham, Commented Apr 5, 2011 at 20:19
Exactly, and also ordered within one of the itemscontrols in each cell. — Bas
– Bas, Commented Apr 5, 2011 at 20:25
Oh ok I didn't realize that each cell is it's own items control. Makes more sense now that I look back at the diagram. Formulating an answer now — Brad Cunningham
– Brad Cunningham, Commented Apr 5, 2011 at 20:44
I'd like to help, but I don't understand what can be dragged and dropped. Can you give an example? — Philipp Schmid
– Philipp Schmid, Commented Apr 5, 2011 at 20:44
@Philipp Some user control with a few textblocks and some buttons, I know how to implement this drag & drop though. — Bas
– Bas, Commented Apr 5, 2011 at 20:50

Brad Cunningham · Accepted Answer · 2011-04-05 20:50:36Z

1

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.

answered Apr 5, 2011 at 20:50

Brad Cunningham

6,5111 gold badge36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

poindexter12 Over a year ago

ha, I had this up to answer the same thing :)

Zebi · Accepted Answer · 2011-04-05 20:46:46Z

1

If you want to use a wpf datagrid it's not hard to achieve your desired layout if you use TemplateColumns 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.

answered Apr 5, 2011 at 20:46

Zebi

8,8921 gold badge39 silver badges43 bronze badges

Collectives™ on Stack Overflow

Custom WPF control

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related