綁定圖片到GridView控件的Windows 8

Question

這個問題是在某些方面類似於此：

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> 

該代碼僅僅是250x250的模板的修正版，來自StandardStyles.xaml。

最初，我無法在屏幕上加載任何圖像（它們只是顯示爲灰色方塊）。然後我看到，這裏（獼猴桃爲例）的實現，我能得到一些圖片加載，但大多數仍停留灰色：

http://social.msdn.microsoft.com/Forums/windowsapps/en-US/252d4d14-1db3-4f04-93b6-d2eab2c386bc/c-metro-displaying-images-in-a-listview-or-gridview

然後，隨着最後解決我上面貼我已經能夠獲得第一張幻燈片，但其他幻燈片甚至沒有顯示爲灰色框，更不用說加載了。幫助將不勝感激！

Answer 1

一點背景

首先，讓我們來看看這條線在LoadState功能：

slides.loadSlides(); 

的方式上面正在寫，調用loadSlides開始執行。因爲它是一個異步方法，它執行平行於它後面的代碼：

this.DefaultViewModel["Items"] = slides.Slides; 
... 

正在發生的事情是，網格被綁定到集合之前到loadSlides方法的完成。這就是你只能看到一個或兩個圖像的原因。

解決方案

要解決這一點，你必須修復您所呼叫的loadSlides功能的方式。首先，函數簽名改變從void到Task：

public async Task loadSlides() { ... } 

接下來，你需要調用await到loadSlides。當您使用異步方法時，您實際上正在等待該方法在繼續執行之前完成。請注意，只有返回Task（或Task<..>的一些變體）的方法可以是awaited。你已經添加了await後，在你的頁面的LoadState函數的代碼應該是這樣的：

... 
SlideData slides = new SlideData(files); 
await slides.loadSlides(); 
this.DefaultViewModel["Items"] = slides.Slides; 
... 

現在，當loadSlides被調用時，你的程序將等待，直到它完成。然後下一行將被調用，這將綁定您的網格到完整的幻燈片數據。這應該讓你看到所有的圖像。