使用Windows Phone 7的Silverlight創建表

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

盡管都不是簡單的解決方案。

您也可以嘗試Mike的AutoGrid：

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

Answer 2

這是ColinE建議的使用SharedSizeGroup的解決方案。

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

甚至每列的最大值都可以通過TextBlock的MaxWidth屬性來控制。 SharedSizeGroups確保TextBlocks在每一行中具有相同的大小。

Answer 3

您可以使用WrapPanel 。 設置以下ItemsPanel在Datatemple ，你可以有文字塊。

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