Creating a table with Silverlight for Windows Phone 7

Question

I\'d like to create a table on WP7. This is my current approach using a ListBox with a Grid as the data template.

Answer 1

You can use WrapPanel. Set the following ItemsPanel in the Datatemple, you can just have textblock.

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <control:WrapPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

Answer 2

Here is my solution using SharedSizeGroup as suggested by ColinE.

<ListBox x:Name="ResultsList">

    <ListBox.Resources>
        <SharedSize:SharedSizeGroup x:Key="Col1Width" />
        <SharedSize:SharedSizeGroup x:Key="Col2Width" />
        <SharedSize:SharedSizeGroup x:Key="Col3Width" />

        <DataTemplate x:Key="ResultsListItem">
            <StackPanel d:DesignWidth="385" Orientation="Horizontal">
                <SharedSize:SharedSizePanel WidthGroup="{StaticResource Col1Width}">
                    <TextBlock x:Name="textBlock" MaxWidth="100" Text="{Binding A}"/>
                </SharedSize:SharedSizePanel>
                <SharedSize:SharedSizePanel WidthGroup="{StaticResource Col2Width}">
                    <TextBlock x:Name="textBlock1" MaxWidth="85" Text="{Binding B}"/>
                </SharedSize:SharedSizePanel>
                <SharedSize:SharedSizePanel WidthGroup="{StaticResource Col3Width}">
                    <TextBlock x:Name="textBlock2" MaxWidth="200" Text="{Binding C}"/>
                </SharedSize:SharedSizePanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <StaticResource ResourceKey="ResultsListItem"/>
    </ListBox.ItemTemplate>
</ListBox>

Even the maximum with of each column can be controlled via the TextBlock's MaxWidth property. The SharedSizeGroups ensure that the TextBlocks have the same size in each row.

Answer 3

This is a tricky problem! In WPF there exists the concept of a SharedSizeGroup, which allows you to share column widths across multiple grids, but this is not available in silverlight.

There are a few workarounds on the web:

http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/

http://databaseconsultinggroup.com/blog/2009/05/simulating_sharedsizegroup_in.html

Although neither are simple solutions.

You might also try Mike's AutoGrid:

http://whydoidoit.com/2010/10/06/automatic-grid-layout-for-silverlight/