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

でもないが。

また、マイクのAutoGridを試してみてください：コリンによって示唆されているようにここで

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

Answer 2

は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のサイズが同じであることを保証します。

Answer 3

WrapPanelを使用できます。 Datatempleに次のようにItemsPanelを設定すると、テキストブロックを作成できます。

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