我从服务器获取图像。 我不知道当我请求图像时有多少图像来自服务器。 获取图像后,我想在网格视图中显示它们,每行有3列 如下图所示。所以这里的列是固定的(3)。应根据图像数量更改行。
请告诉我如何在Windows Phone 8中这样做。
答案 0 :(得分:7)
一种可能是使用LongListSelector并将LayoutMode设置为Grid。
然后你设置GridCellSize的方式是每行只显示3个图像(例如,如果屏幕宽度为480,则每行的3个方形图像将GridCellSize设置为160x160。)
答案 1 :(得分:4)
创建一个简单的列表框,并使用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可能会略微提高性能。
答案 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; }
}