Using a Grid as the Panel for an ItemsControl

In this blog post I look at how to use a Grid as the ItemsPanel for an ItemsControl, solving a few of the issues that crop up along the way.

The Grid is probably the most useful of Silverlight and WPF’s panels (panels are elements which provide a mechanism for laying out their children). The ItemsControl provides a mechanism for generating multiple instances of some template based on the data that is bound to it. The ItemsControl ‘concept’ is highlight versatile, and is used as the foundation for many of the framework controls, I find myself using it all the time.

Isn’t it a shame that Grid and ItemsControl don’t play together nicely?

So what do I mean by this? I am sure that if you have ever tried to generate Grid a layout using an ItemsControl you will know what I am talking about, but if not, here’s a very brief summary of the problem. An ItemsControl manages a number of child elements, you can configure the type of panel the ItemsControl adds children to via its ItemsPanel property. If I have a list of strings which I want to render using a Grid, I might expect the following to work … in XAML:

<ItemsControl ItemsSource="{Binding}">
 <!-- host the items generated by this ItemsControl in a grid -->
 <ItemsControl.ItemsPanel>
   <ItemsPanelTemplate>
     <Grid/>
   </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>
 <!-- render each bound item using a TextBlock-->
 <ItemsControl.ItemTemplate>
   <DataTemplate>
     <TextBlock Text="{Binding}"/>
   </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

And in code-behind:

this.DataContext = new string[]
 { "one", "two", "three", "four", "five"  };

So what is wrong with the above? There are a couple of problems:

1. When using a Grid you must add the required number of rows / columns via the RowDefinitions ColumnDefinitions properties. In the above example what we really want is for the grid rows to be added dynamically based on the number of items in the bound data. Unfortunately this is not supported either by the Grid or the ItemsControl.
2. The second problem is that items within a grid must declare the row / column that they occupy via the Grid.Row and Grid.Column attached properties. You might think that you could add a Grid.Row property to the TextBlock in the above example, binding it to some other property of the bound collection. However, this will not work because the TextBlock elements are not added into the grid directly; each one is added as the content of a ContentPresenter which is generated for us.

Read more: Scott Logic

Posted via email from .NET Info