Itemscontrol to position items horizontally and make children stretch to stackpanel width

Question

I'm creating a grid like control, and i'm using an itemscontrol to represent a row and the another itemscontrol to put those rows together. In a row, the items are positioned horizontally so I use a StackPanel with a horizontal orientation like this:

<ItemsControl ItemsSource="{Binding CellRows}" Grid.Row="1" Grid.Column="1" Margin ="20">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Background="Cyan"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding Content}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

By default, I want my StackPanel to take the size its parent has and that happens. But I also want all the children in the itemscontrol (with the stackpanel as itemspanel) to take up the full width of its parent. But that doesn't happen.

I've read that is default behavior of a stackpanel as well.

My questions:

1) Is there any way to make my textboxes (children) to take up the full width of my stackpanel (parent)? I don't know how many items the stackpanel will contain, so I can't give a default width to the textboxes.

2) Is there any other to represent 2D data? (I'm working with silverlight 4 MVVM)

Thanks in advance.

If we take a step back what would you say that the constraints of the grid are? Do you want the number of columns to be fixed, number of rows? Do you want it to scroll? Do you want to fix the cell size? — Slugart
@Slugart: A grid would limit me in the use of dynamic rows and columns. I don't want to have to position every item in the grid, as I don't know how many items will be in there: it can be 3x3 or 9x9. — Terry
I'm guessing that you don't want the grid to scroll but instead resize the cells uniformly? — Slugart
@Slugart: indeed, all cells should have the same dimensions preferably. — Terry
Is there something wrong with the DataGrid? msdn.microsoft.com/en-us/library/… — cadrell0

Slugart Slugart · Accepted Answer · 2012-02-24T13:30:26

Check out the UniformGrid for SL control here: http://www.jeff.wilcox.name/2009/01/uniform-grid/

The definition of the UniformGrid from the MSDN: "Provides a way to arrange content in a grid where all the cells in the grid have the same size."

If you want this to be bound to an observable collection simply place the UniformGrid in the ItemsPanelTemplate of an ItemsControl as UniformGrid extends Panel.

Itemscontrol to position items horizontally and make children stretch to stackpanel width

1 Answers