使用 Silverlight for Windows Phone 7 创建表答案

【问题标题】：Creating a table with Silverlight for Windows Phone 7使用 Silverlight for Windows Phone 7 创建表
【发布时间】：2011-09-16 07:26:17
【问题描述】：

我想在 WP7 上创建一个表格。这是我目前使用带有 Grid 作为数据模板的 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>

问题是，结果表的列大小不相等。 Grid 的列定义独立于其他行应用于每一行。这意味着，如果 textBlock1 中有长文本，则第 0 列会更大。在下一行中，textBlock1 中的文本可能较短，导致第 0 列也比上一行中的第 0 列短。

如何使所有行中的列大小相等？我不想使用固定宽度，因为当方向从纵向变为横向时，列会自动调整大小。

有 HeaderedItemsControl，但据我了解，它不适用于 Windows Phone 7？

【问题讨论】：

标签： c# silverlight windows-phone-7 silverlight-toolkit

【解决方案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/

【讨论】：

非常感谢！ SharedSizeGroup 的解决方案非常适合我。它可以与 ListBox 一起使用而没有任何问题。我将发布我的解决方案作为答案。
你有第二个链接的替代来源吗？您可以编辑答案以删除链接或将其替换为有效链接吗？之后，只需标记答案并要求版主删除我的评论。此外，在未来，请避免only 发布链接，最好在此处获得复制和/或重写其中一些解决方法的许可，这样即使已损坏，答案仍然有效关联。谢谢。

【解决方案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 确保 TextBlock 在每一行中具有相同的大小。

【讨论】：

你有 SharedSizeGroup 的资源吗？你能把它们贴在某个地方吗？

【解决方案3】：

您可以使用WrapPanel。在Datatemple中设置如下ItemsPanel，就可以有textblock了。

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

【讨论】：