Search code examples
mvvmsilverlight-4.0orientationstackpanel

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

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.

Solution

  • 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.