在Windows Phone 8中以网格视图显示图像

时间:2013-11-11 06:01:37

标签: gridview windows-phone-8

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

enter image description here

请告诉我如何在Windows Phone 8中这样做。

3 个答案:

答案 0 :(得分:7)

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

然后你设置GridCellSize的方式是每行只显示3个图像(例如,如果屏幕宽度为480,则每行的3个方形图像将GridCellSize设置为160x160。)

答案 1 :(得分:4)

创建一个简单的列表框,并使用toolkit:WrapPanel

将其ItemsPanel设置为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可能会略微提高性能。

答案 2 :(得分:2)

如果您的目的是仅显示图片(而非选择),请转到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; }
}