Создание таблицы с Silverlight для Windows Phone 7

Question

Я бы хотел создать таблицу на WP7. Это мой текущий подход с использованием ListBox с сеткой в ​​качестве шаблона данных.

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

Проблема в том, что результирующие столбцы таблицы не имеют одинакового размера. Определения столбцов таблицы применяются к каждой строке независимо от других строк. Это означает, что если в textBlock1 есть длинный текст, столбец 0 будет больше. В следующей строке может быть более короткий текст в textBlock1, в результате чего столбец 0 также будет короче столбца 0 в предыдущей строке.

Как столбцы во всех строках могут быть одинакового размера? Я не хочу использовать фиксированную ширину, потому что, когда ориентация меняется с книжной на альбомную, столбцы автоматически меняют размеры.

Существует HeaderedItemsControl, но, насколько я понимаю, он недоступен для Windows Phone 7?

Answer 1

Это сложная проблема! В WPF существует концепция SharedSizeGroup, которая позволяет разделять ширину столбцов по нескольким сеткам, но это не доступно в silverlight.

В Интернете есть несколько обходных путей:

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

Хотя и не простые решения.

Вы также можете попробовать Автосетка Майка:

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

Answer 2

Вот мое решение с использованием SharedSizeGroup в соответствии с предложением 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>

Даже максимум с каждого столбца можно контролировать с помощью свойства MaxWidth TextBlock.SharedSizeGroups гарантирует, что TextBlocks имеют одинаковый размер в каждой строке.

Answer 3

Вы можете использовать WrapPanel. Установите следующее ItemsPanel в Datatemple, вы можете просто иметь текстовый блок.

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