wpf creating dynamic clickable "grid"

Question

I'm not really sure how to go about my problem. Not looking for complete code just help with in which direction i should go. Since its MVVM I don't want any codebehind... if possible...

From the db i get the size of the "grid" i should create, for example 2x3. Now i wish to place an "item" in this grid that takes up one or more spots.

I'm currently trying to do this with a ItemsControl that contains a grid (i want a grid because i want to use ShowGridLines="True") But how do I create a dynamic grid? Thought about using uniformgrid but that one doesn't have ShowGridLines...

Second problem (since i'm a mvvm noob) is selecting the a spot in the grid. The one you click will not be a problem. The problem is if the item you're trying to place takes up two spots. How do I know which spot is the one next to the one i'm clicking?

Any help is appreciated

Answer 1

Since you cant easily Bind the Row/Column definitions of a Grid, i suggest you to build a simple custom control, which inherits directly from Grid.

Here is my approach with 3 additional dependency properties:

• int MyColumnCount
• int MyRowCount
• ObservableCollection MyChilds

the MyColumnCount/MyRowCount will be bound to Properties in the ViewModel, which you update, when you get the new values from the database. Also the ViewModel will provide a collection of FrameworkElements, which will be the items in the Grid and is bound to MyChilds.

You can create new Controls in the ViewModel and use the attached property of the Grid, to set the Position. For example:

TextBlock b = new TextBlock() { Text = "Hello World!" };
Grid.SetRow(b, <your position>);
Grid.SetColumn(b, <your position>);
Grid.SetColumnSpan(b, <your column span>);
MyChilds.Add(b);

In the PropertyChangedCallbacks of the new int properties, you modify the Row/Column definitions, according to the new values. The callback of the collection property registers a collection changed event on the new ObservableCollection and adds the new items to the Grid's children, on changing events.

Thats all you need for the dynamic grid changes.

To your second question: This is quite easy. In the event you catch you will get the sender of the clicked item in the grid. The sender is mostly the direct clicked control. You can use the static Grid functions again, to calculate the position:

Grid.GetRow(item);
Grid.GetColumn(item);
Grid.GetColumnSpan(item);

With the total number of rows/columns of the grid (My...Count) you can calculate neighbor positions.

Jan