开发者

How to create a databound grid of images?

I'm creating a Silverlight App. I have successfully created the data, bound it to the Listbox, and I get a column of thumbnails.

Here is my existing code:

<S开发者_高级运维tackPanel 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>

However, I want a three column grid of thumbnails, instead of just a single column. How would I create that and still do it via databinding?

Thanks.


The layout of your ListBox is determined by the panel that it adds items to. By default this is a StackPanel (or VirtualizingStackPanel). To create a different layout, you can change the panel to something else.

Unfortunately there is no panel that you can configure to create a 3 column layout, however if you use a WrapPanel and constrain the width of your list box, it should give you the 3 column layout you desire.

  <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 is part of the Silverlight Toolkit for Windows Phone 7 (http://silverlight.codeplex.com/)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜