WinRT的预先载入图像 [英] WinRT preload images

问题描述

我有一个Windows 8.1 XAML应用程序，我想在哪里的预紧的网页间导航前的图片。

天真的代码，我有现在是：

<预类=郎-CS prettyprint-覆盖> // Page1.xaml.cs
私人无效Button_Click（对象发件人，RoutedEventArgs E）
{
Frame.Navigate（typeof运算（第2页））;
}


和第二页上：

<预类=郎-CS prettyprint-覆盖> // Page2.xaml.cs
this.image1.Source =新的BitmapImage（新的URI（MS-APPX：/ //Assets/image1.jpg））;
this.image2.Source =新的BitmapImage（新的URI（MS-APPX：///Assets/image2.jpg））;


现在，当我点击按钮，导航，我可以看到图像被加载并展示某一个当时。我想的图像已经被加载后，点击按钮来预先载入图像，只有导航的。

不幸的是，刚刚创建的BitmapImage 对象，并等待 ImageOpened 事件不起作用。看来，如果他们不呈现在屏幕上的图像不会加载。

有没有办法强制从代码加载图像，而不将其添加到可视化树

（注：一种解决办法将是真正的所有图像添加到窗口在一些看不见的方式，但我想避免，如果在所有可能的）

---

最终的解决方案：

这是我想出用 SetSourceAsync ，由菲利普Skakun 的建议：

<预类=郎-CS prettyprint-覆盖> // Page1.xaml.cs
私人异步无效Button_Click（对象发件人，RoutedEventArgs E）
{
bitmapImage1 =新的BitmapImage（）;
bitmapImage2 =新的BitmapImage（）;

//负载并联
变种独立写作两个图像= loadImageAsync（bitmapImage1image1.jpg）;
VAR TASK2 = loadImageAsync（bitmapImage2image2.jpg）;
等待Task.WhenAll（独立写作，TASK2）;

Frame.Navigate（typeof运算（第2页））;
}

私人任务loadImageAsync（的BitmapImage BitmapImage的，字符串路径）
{
变种文件路径= ApplicationData.Current.LocalFolder.Path +\\+路径;
var文件=等待StorageFile.GetFileFromPathAsync（文件路径）;
VAR流=等待file.OpenAsync（FileAccessMode.Read）;
等待bitmapImage.SetSourceAsync（流）;
}


<预类=郎-CS prettyprint-覆盖> // Page2.xaml.cs
this.image1.Source = bitmapImage1;
this.image2.Source = bitmapImage2;


解决方案

的WinRT XAML工具包的的 AlternativeFrame 控制的 AlternativePage 人不得不在 ShouldWaitForImagesToLoad 属性，当你设置为true并导航到一个页面 - 将只显示页面的图像时，已加载。 AlternativePage 有一个预紧（）方法，你还可以覆盖增加更多的东西显示页面之前等待。它虽然实现的方法是在页面第一次加入到可视化树一个无形的容器，因此那些装载 BitmapImages 被触发。

另一个选择可能是使用的 SetSourceAsync（） ，你可以等待，我认为它开始加载使用前 BitmapImage的中的UI，但随后你需要自己下载的文件。

I have a Windows 8.1 XAML app where I'd like to preload images before navigating between pages.

The naive code I have now is:

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

And on the second page:

// 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"));

Now, when I click the button to navigate, I can see the images being loaded and showing up one at the time. I would like to pre-load the images on the button click and only navigate after the images have been loaded.

Unfortunately, just creating the BitmapImage objects and waiting for the ImageOpened events doesn't work. It appears that the images aren't loaded if they aren't rendered to the screen.

Is there a way to force loading of the images from code without adding them to the visual tree?

(Note: a workaround would be to actually add all the images to the Window in some invisible way, but I'd like to avoid that if at all possible)

---

Final solution:

This is what I've come up with using SetSourceAsync, as suggested by Filip Skakun:

// 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;

解决方案

WinRT XAML Toolkit's AlternativeFrame control and AlternativePage one have a ShouldWaitForImagesToLoad property that when you set to true and navigate to a page - will only display the page when the images have loaded. AlternativePage has a Preload() method you can also override to add more things to await before displaying the page. The way it is implemented though is the page is first added to an invisible container in the visual tree, so loading of those BitmapImages gets triggered.

Another option might be to use SetSourceAsync() which you can await and I think it starts loading before you use the BitmapImage in the UI, but then you need to download the file yourself.

这篇关于WinRT的预先载入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！