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/)
精彩评论