Question

我正在创建一个Silverlight应用程序。我已成功创建数据，将其绑定到列表框，然后我得到一列缩略图。

这是我现有的代码：

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

但是，我想要一个三列的缩略图网格，而不是一列。我如何创建它并仍然通过数据绑定来完成？

感谢。

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的Silverlight Toolkit的一部分（http://silverlight.codeplex.com/）

如何创建数据绑定网格图像？

1 个答案: