Getting the content from a Grid if you know the Row and Column in Silverlight

This should be a quick post about something that I do quite a bit when creating my own designer screens. I like to use a Grid control as my designer surface since it allows me to provide the same paradigm that I would use if I were to manually create a screen in Visual Studio. It also gives users good feedback when you set the property ShowGridLines to true. Well, one of the things that I allow my users to do is to set the RowSpan or ColumnSpan of a control through a property editor. When the user does this, I need to have a mechanism to set the value for the corresponding control that is in the Grid.

Let’s take a look at what I am talking about. I am going to use a screen that I talked about in a previous post which allows users to create bills and invoice formats:

Grid with a Control selected.

When we set the ColumnSpan to 2, we should see the following:

Grid with a Control now with a ColumnSpan of 2.

Now let’s look how we can get the control in question from a Grid and set its ColumnSpan programmatically.

The property grid on the right is associated with whatever control is selected on the designer surface. I have some metadata around my controls, which I have a class called DesignerItem, that exposes a Row and Column property. When I perform a drag and drop operation, I make sure that I set the Row and Column properties correspondingly. Then I use the ValueChanged event handler of the RadNumericUpDown control to get the control object from the Grid:

public void nudColumnSpan_ValueChanged(object sender, 
	Telerik.Windows.Controls.RadRangeBaseValueChangedEventArgs e)
{
	var item = View.Designer.Children.Cast<FrameworkElement>().Where((o) => Grid.GetColumn(o) == CurrentDetailItem.Column && 
	Grid.GetRow(o) == CurrentDetailItem.Row).FirstOrDefault();

	if (item != null && e.NewValue > 0)
	{
		Grid.SetColumnSpan(item, span);
	}
}

Basically I am using a little lambda magic and Grid.GetColumn(…) and Grid.GetRow(…) methods to find the correct object in the corresponding Column and Row position of the Grid.

NOTE: You will have to write a little more code if you have multiple controls residing in the same location in your Grid.

This may seem trivial but it really saved me a lot of time and effort when I was first trying to get all of the basic workflow working in my designer. As a side note, you could get past all of this if you had metadata to support ColumnSpan and RowSpan like I did for Column and Row. If you had that, than you could have just done standard data binding.

Hope this helps….