这个问题在某些方面与此类似:
Windows 8 XAML: Displaying a list of images in a GridView through data binding
我按照其中列出的说明将图像加载到我自己的GridView中,然而我从一些图像加载到很多,只有第一个图像加载,就是这样;其余的甚至没有显示为空白,而在它们全部存在之前如果没有完全装载。这是我的代码,它使用了与上述问题相同的大部分内容:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Storage;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Storage.Streams;
namespace present50_2
{
public class SlideData
{
// slide collection that will be used to populate app slides page
public List<Slide> Slides = new List<Slide>();
// image files that will be asynchronously loaded
public IReadOnlyList<StorageFile> files;
public SlideData(IReadOnlyList<StorageFile> files)
{
this.files = files;
}
public async void loadSlides()
{
int counter = 1;
Slides = new List<Slide>();
foreach (var file in files)
{
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
Slides.Add(new Slide(stream, counter.ToString()));
}
counter++;
}
}
public class Slide
{
public Slide()
{
}
public Slide(IRandomAccessStream stream, string name)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(stream);
Image = bmp;
this.Title = name;
}
/*
public async void LoadImage()
{
IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
BitmapImage bi = new BitmapImage();
bi.SetSource(fileStream);
this.Image = bi;
} */
public string Title { set; get; }
public BitmapImage Image { set; get; }
}
}
}
该类保存将绑定到网格的数据。这是调用所述类的代码:
protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
var folderPicker = new FolderPicker();
folderPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
folderPicker.FileTypeFilter.Add(".png");
StorageFolder folder = await folderPicker.PickSingleFolderAsync();
if (folder != null)
{
IReadOnlyList<StorageFile> files = await folder.GetFilesAsync();
SlideData slides = new SlideData(files);
slides.loadSlides();
this.DefaultViewModel["Items"] = slides.Slides;
}
}
我只使用以下XAML来实现网格布局和绑定:
<!-- Grid-appropriate 125 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="Standard125x125ItemTemplate">
<Grid HorizontalAlignment="Left" Width="125" Height="125">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="7,0,7,0"/>
</StackPanel>
</Grid>
</DataTemplate>
该代码仅仅是对StandardStyles.xaml中的250x250模板的修改。
最初,我无法在屏幕上显示任何图像(它们只显示为灰色方块)。然后通过我在这里看到的一个实现(Kiwi示例),我能够获得一些图像加载,但大多数仍然保持灰色:
然后,根据我上面发布的最后一个解决方案,我已经能够得到第一张显示的幻灯片,但其他幻灯片都没有显示为灰色框,更不用说加载了。非常感谢帮助!
答案 0 :(得分:0)
小背景
首先,让我们看一下LoadState
函数中的这一行:
slides.loadSlides();
当前编写上述内容的方式,对loadSlides
的调用开始执行。由于它是一个异步方法,因此它与后面的代码并行执行:
this.DefaultViewModel["Items"] = slides.Slides;
...
正在发生的事情是网格被绑定到之前的集合到loadSlides
方法的完成。这就是您只能看到一两张图像的原因。
解决方案
要解决此问题,您必须修改调用loadSlides
函数的方式。首先,将函数签名从void
更改为Task
:
public async Task loadSlides() { ... }
接下来,您需要await
拨打loadSlides
。当您await
使用异步方法时,您实际上在等待该方法在继续执行之前完成。请注意,只有返回Task
(或Task<..>
的某些变体)的方法才能awaited
。添加await
后,您网页LoadState
功能中的代码应如下所示:
...
SlideData slides = new SlideData(files);
await slides.loadSlides();
this.DefaultViewModel["Items"] = slides.Slides;
...
现在调用loadSlides
时,程序将一直等到它完成。然后将调用下一行,它将您的网格绑定到完整的幻灯片数据。这应该可以让你看到所有的图像。