Suppose we want to display a set of objects in a ListBox (or other ItemsControl) using a DataTemplate that uses a Grid:

Running this sample with some of my favorite books, yields the following:

Note the lack of alignment. How can we fix this?

One simple solution is to replace the Width=”Auto” on the ColumnDefinition with a specific width, like so:

This might work, but that’s very fragile. New book names might be wider, or the font size may change.

We could also try a “star” ratio, but again, this may or may not work correctly.

The Grid provides an elegant solution: a column’s width (or a row’s height) can share its size with other Grid objects under some parent container. That’s what’s required here, because the DataTemplate causes multiple Grid objects to be created at runtime under the ListBox. If we could somehow connect their columns’ width – we could get the desired effect.

The DefinitionBase class (base of ColumnDefinition and RowDefinition) provides a SharedSizeGroup property – a string that identifies columns/rows that should have the same size if they share the same value of SharedSizeGroup. In our case, the Grids are created by applying the DataTemplate, so the group name need only be specified once, and its exact value is unimportant:

To make this work, there’s one more step: set the attached Grid.IsSharedSizeScope to true on some parent of those Grids, to set a context from which the strings may be distinguished. In our case, the ListBox control will do just fine:

And that’s it.

Note that (unfortunately) Silverlight does not support this capability.