gridview - 在 windows phone 8 的网格视图中显示图像

Question

我正在从服务器获取图像。当我请求图像时，我不知道有多少图像来自服务器。获取图像后，我想在网格视图中显示它们，每行 3 列，如下图所示。所以这里的列是固定的（3）。应根据图像的数量更改行。

你能告诉我如何在windows phone 8中做到这一点。

Answer 1

一种可能是使用 LongListSelector 并将 LayoutMode 设置为 Grid。

然后，您将设置 GridCellSize 以使每行仅显示 3 个图像（例如，如果屏幕的宽度为 480，则将 GridCellSize 设置为 160x160，以在每行上显示 3 个方形图像。）

Answer 2

创建一个简单的列表框并将其 ItemsPanel 设置toolkit:WrapPanel为Orientation="Horizontal"

<ListBox Margin="0,40,0,0" ItemsSource="{Binding}" Width="450" VirtualizingStackPanel.VirtualizationMode="Recycling">
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <toolkit:WrapPanel Orientation="Horizontal" />
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Grid Height="150" Width="150">
            <Image Height="130" Width="130" HorizontalAlignment="Center" VerticalAlignment="Center" />
         </Grid>
      </DataTemplate>
   </ListBox.ItemTemplate>
 </ListBox>

请注意，如果视图中同时加载了太多图像，可能会导致 Out Of Memory 异常。因此，只需确保您添加的图像是缩略图而不是完整的图像。VirtualizationStackPanel 可能会稍微提高性能。

Answer 3

如果您的目的是仅显示图像（而不是选择）ItemsControl，请查看下面的代码。

XAML

<ItemsControl x:Name="ic">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Image Stretch="None" Source="{Binding First}" />
                <Image Stretch="None" Source="{Binding Second}" Grid.Column="1" />
                <Image Stretch="None" Source="{Binding Third}" Grid.Column="2" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

C＃

public MainPage()
{
    InitializeComponent();
    var URLs = new List<Uri> 
    {
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png")
    };

    var GroupedURLs = new List<ImageViewModel>();
    for (int i = 0; i < URLs.Count; i=i+3)
    {
        var objImageViewModel = new ImageViewModel();
        if (URLs.ElementAtOrDefault(i) != null)
        {
            objImageViewModel.First = URLs[i];
        }
        if (URLs.ElementAtOrDefault(i + 1) != null)
        {
            objImageViewModel.Second = URLs[i + 1];
        }
        if (URLs.ElementAtOrDefault(i + 2) != null)
        {
            objImageViewModel.Third = URLs[i + 2];
        }

        GroupedURLs.Add(objImageViewModel);
    }

    ic.ItemsSource = GroupedURLs;
}

public class ImageViewModel
{
    public Uri First { get; set; }
    public Uri Second { get; set; }
    public Uri Third { get; set; }
}