データバインドされたイメージのグリッドを作成するには？

Question

私はSilverlight Appを作成しています。私は正常にデータを作成し、リストボックスにバインドし、サムネイルの列を取得します。だけではなく、単一の列で、

<StackPanel x:Name="ListPanel" Grid.Row="1"> 
    <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Thumbs}"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
     <Image Height="100" Width="100" Source="{Binding ThumbnailUrl}" Margin="12,0,9,0"/> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
    </ListBox> 
</StackPanel> 

は、しかし、私はサムネイルの3列のグリッドをしたい：

は、ここに私の既存のコードです。どのように私はそれを作成し、まだデータバインディングを介して行うのだろうか？

ありがとうございました。

Answer 1

ListBoxのレイアウトは、項目を追加するパネルによって決まります。デフォルトではStackPanel（またはVirtualizingStackPanel）です。別のレイアウトを作成するには、パネルを別のものに変更します。

残念ながら、3列のレイアウトを作成するためのパネルはありませんが、WrapPanelを使用してリストボックスの幅を制限すると、3列のレイアウトが必要になります。

<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Thumbs}" 
      Width="300"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
     <Image Height="100" Width="100" Source="{Binding ThumbnailUrl}" Margin="12,0,9,0"/> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
     <toolkit:WrapPanel /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    </ListBox> 

WrapPanelは、これは私が他の場所で受信同様の助言に基づいてやってしまったものですのWindows Phone 7（http://silverlight.codeplex.com/）