WinRT预加载图像

时间:2014-03-31 20:36:42

标签: c# xaml windows-runtime windows-8.1

我有一个Windows 8.1 XAML应用,我希望在浏览页面之前预加载图像。

我现在的天真代码是:

// Page1.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
  Frame.Navigate(typeof(Page2));
}

在第二页上:

// Page2.xaml.cs
this.image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/image1.jpg"));
this.image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/image2.jpg"));

现在,当我点击按钮进行导航时,我可以看到正在加载的图像并且当时显示一个图像。我想在点击按钮上预加载图像,只在图像加载后导航

不幸的是,仅创建BitmapImage个对象并等待ImageOpened个事件并不起作用。如果图像未被渲染到屏幕上,则图像似乎无法加载。

有没有办法强制从代码加载图像而不将它们添加到可视树中?

(注意:一种解决方法是以一种看不见的方式将所有图像实际添加到窗口中,但我想尽可能避免这种情况)


最终解决方案:

按照 Filip Skakun 的建议,这是我使用SetSourceAsync提出的:

// Page1.xaml.cs
private async void Button_Click(object sender, RoutedEventArgs e)
{
  bitmapImage1 = new BitmapImage();
  bitmapImage2 = new BitmapImage();

  // Load both images in parallel
  var task1 = loadImageAsync(bitmapImage1, "image1.jpg");
  var task2 = loadImageAsync(bitmapImage2, "image2.jpg");
  await Task.WhenAll(task1, task2);

  Frame.Navigate(typeof(Page2));
}

private Task loadImageAsync(BitmapImage bitmapImage, string path)
{
  var filePath = ApplicationData.Current.LocalFolder.Path + "\\" + path;
  var file = await StorageFile.GetFileFromPathAsync(filePath);
  var stream = await file.OpenAsync(FileAccessMode.Read);
  await bitmapImage.SetSourceAsync(stream);
}
// Page2.xaml.cs
this.image1.Source = bitmapImage1;
this.image2.Source = bitmapImage2;

1 个答案:

答案 0 :(得分:4)

WinRT XAML Toolkit的AlternativeFrame控件和AlternativePage属性具有ShouldWaitForImagesToLoad属性,当您设置为true并导航到某个页面时 - 只会在加载图像时显示该页面。 AlternativePage有一个Preload()方法,您也可以覆盖它以在显示页面之前添加更多内容。实现它的方式是首先将页面添加到可视化树中的不可见容器中,以便触发加载BitmapImages

另一种选择可能是使用你可以等待的SetSourceAsync(),我认为它会在你在UI中使用BitmapImage之前开始加载,但是你需要自己下载文件。