如何從UWP中的文件夾加載圖像到頁面時立即加載圖像

Question

我正在使用AdaptiveGridView將圖像列表從文件夾加載到頁面上。我的問題是，如何在圖像準備好後立即加載圖像，而不必等待圖像的整個列表進行處理。 這裏是我的代碼： C＃

public class Images 
     { 
      public ImageSource ImageURL { get; set; } 
      public string ImageText { get; set; } 
     } 

     private List<Images> ImageCollection; 

     private async void Button_Click(object sender, RoutedEventArgs e) 
     { 
      ImageCollection = new List<Images>(); 
      // pick a folder 
      var folderPicker = new Windows.Storage.Pickers.FolderPicker(); 
      folderPicker.FileTypeFilter.Add(".jpg"); 
      var folder = await folderPicker.PickSingleFolderAsync(); 
      var filesList = await folder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.DefaultQuery, new string[] { ".jpg", ".png", ".jpeg" })).GetFilesAsync(); 
      for (int i = 0; i < filesList.Count; i++) 
      { 
       StorageFile imagefile = filesList[i]; 
       BitmapImage bitmapimage = new BitmapImage(); 
       using (IRandomAccessStream stream = await imagefile.OpenAsync(FileAccessMode.Read)) 
       { 
        bitmapimage.SetSource(stream); 
       } 

       ImageCollection.Add(new Images() 
       { 
        ImageURL = bitmapimage, 
        ImageText = filesList[i].Name 
       }); 
       countPhotos.Text = i.ToString() + "out of" + filesList.Count.ToString(); 

      } 
      AdaptiveGV.ItemsSource = ImageCollection; 

     } 

XAML：

<Page.Resources> 
     <DataTemplate x:Key="PhotosList"> 
      <Grid> 
       <Image Source="{Binding ImageURL}" 
         Stretch="UniformToFill" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center"> 

       </Image> 
      </Grid> 
     </DataTemplate> 
    </Page.Resources> 
    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Button HorizontalAlignment="Left" VerticalAlignment="Top" Content="click me" Click="Button_Click"> 

     </Button> 
     <TextBlock Name="countPhotos"> 

     </TextBlock> 
     <ScrollViewer> 

      <UWPToolkit:AdaptiveGridView x:Name="AdaptiveGV" 
               ItemHeight="300" DesiredWidth="500" 
               ItemTemplate="{StaticResource PhotosList}"> 

      </UWPToolkit:AdaptiveGridView> 
     </ScrollViewer> 



    </StackPanel> 

我累了移動的for循環，但裏面的AdaptiveGV.ItemsSource = ImageCollection;放緩的過程中，我不認爲它要完成什麼是最好的方式我想在這裏做。任何其他建議？ 謝謝

Answer 1

您應該使用ObservableCollection而不是List。您可以在添加圖像之前將該集合分配給ItemsSource屬性。 ObservableCollection通知UI關於變化，例如關於添加的元素。

除此之外，您還應該使用async BitmapImage.SetSourceAsync()方法。

public class ImageItem 
{ 
    public ImageSource Image { get; set; } 
    public string ImageText { get; set; } 
} 

private async void Button_Click(object sender, RoutedEventArgs e) 
{ 
    var imageCollection = new ObservableCollection<ImageItem>(); 
    AdaptiveGV.ItemsSource = imageCollection; 

    for ... 
    { 
     ... 
     await bitmapimage.SetSourceAsync(stream); 

     ... 
     imageCollection.Add(new ImageItem() 
     { 
      Image = bitmapimage, 
      ImageText = filesList[i].Name 
     }); 
    } 
} 

還請注意，我已經 ImageItem和Image替換（混亂）名稱Images和ImageURL。你將不得不改變Image.Source綁定中的DataTemplate這樣：

<Image Source="{Binding Image}" 

---

下一步可能是創建包含ObservableCollection<ImageItem>作爲視圖模型（只讀）屬性：

public class ViewModel 
{ 
    public ObservableCollection<ImageItem> ImageCollection { get; } 
     = new ObservableCollection<ImageItem>(); 

    public async Task LoadImages(StorageFolder folder) 
    { 
     var queryOptions = new QueryOptions(
      CommonFileQuery.DefaultQuery, new string[] { ".jpg", ".png", ".jpeg" }); 
     var files = await folder.CreateFileQueryWithOptions(queryOptions).GetFilesAsync(); 

     foreach (var file in files) 
     { 
      using (var stream = await file.OpenReadAsync()) 
      { 
       BitmapImage image = new BitmapImage(); 
       await image.SetSourceAsync(stream); 

       ImageCollection.Add(new ImageItem 
       { 
        Image = image, 
        ImageText = file.Name 
       }); 
      } 
     } 
    } 
} 

你會指定頁面的DataContext在頁面構造視圖模型的實例，並調用LoadImages()方法上的按鈕點擊：

public MainPage() 
{ 
    InitializeComponent(); 
    DataContext = new ViewModel(); 
} 

private async void Button_Click(object sender, RoutedEventArgs e) 
{ 
    var folderPicker = new Windows.Storage.Pickers.FolderPicker(); 
    folderPicker.FileTypeFilter.Add(".jpg"); 
    var folder = await folderPicker.PickSingleFolderAsync(); 

    if (folder != null) 
    { 
     await ((ViewModel)DataContext).LoadImages(folder); 
    } 
} 

在XAML中，你會ItemsSource屬性綁定到ImageCollection屬性是這樣的：

<UWPToolkit:AdaptiveGridView ... 
    ItemsSource="{Binding ImageCollection}" 
    ItemTemplate="{StaticResource PhotosList}" />