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.

<ListBox x:Name="ResultsList" Margin="12,0" Grid.Row="1">
    <ListBox.Resources>
        <DataTemplate x:Key="ResultsListItem">
            <Grid d:DesignWidth="385" Height="28">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="88"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="textBlock1" Margin="0,0,24,0"/>
                <TextBlock x:Name="textBlock2" Margin="0,0,24,0"
                    VerticalAlignment="Top" Grid.Column="1"/>
                <TextBlock x:Name="textBlock3" Margin="0,0,24,0" 
                    VerticalAlignment="Top" Grid.Column="3"/>
            </Grid>
        </DataTemplate>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <StaticResource ResourceKey="ResultsListItem"/>
    </ListBox.ItemTemplate>
</ListBox>

The problem is, that the resulting table's columns are not sized equally. The Grid's column definitions are applied to each row independently of the other rows. That means, if there is a long text in textBlock1, column 0 will be larger. In the next row there could be a shorter text in textBlock1, resulting in column 0 also being shorter than the column 0 in the previous row.

How can the columns in all rows be sized equally? I don't want to use fixed width because when the orientation changes from portrait to landscape the colums would resize automatically.

There is the HeaderedItemsControl, but as I understand it it is not available for Windows Phone 7?

Answer 1

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/

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

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

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