Как создать сетку изображений с привязкой к данным?

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 является частью набора инструментов Silverlight для Windows Phone 7 (http://silverlight.codeplex.com/)