Windows 8 XAML：通過數據綁定在GridView中顯示圖像列表

Question

我想在C＃中編寫一個Windows 8應用程序，我想在其中顯示用戶通過FileOpenPicker選擇的圖像列表。我希望使用XAML數據綁定在GridView中顯示這些圖像。我已經嘗試了一些東西，但數據綁定似乎不起作用。我不確定我需要在哪個位置設置GridView的itemssource。如果我在MainPage構造函數中執行此操作，那麼GridView將不會刷新，因爲隨着用戶選擇圖像，數據綁定列表將在稍後填充。

我該如何解決這個問題？

Answer 1

更新1

如果你要綁定GridView，那麼你需要添加一些東西。請參閱我已用一些註釋行更新了我的答案。您需要添加這些線路供應ItemsSource通過XAML

---

在這裏，你去。

C＃

private async void btnBrowsePhotos_Click(object sender, RoutedEventArgs e) 
{ 
    //var objImageItem = new ImageItem(); 
    FileOpenPicker openPicker = new FileOpenPicker(); 

    openPicker.ViewMode = PickerViewMode.Thumbnail; 
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; 
    openPicker.FileTypeFilter.Add(".jpg"); 
    openPicker.FileTypeFilter.Add(".jpeg"); 
    openPicker.FileTypeFilter.Add(".png"); 

    var files = await openPicker.PickMultipleFilesAsync(); 
    List<ImageItem> ImageList = new List<ImageItem>(); 
    foreach (var file in files) 
    { 
     using (var stream = await file.OpenAsync(FileAccessMode.Read)) 
     { 
      //objImageItem.ImageList.Add(new ImageItem(stream, file.Name)); 
      ImageList.Add(new ImageItem(stream, file.Name)); 
     } 
    } 

    gv.ItemsSource = ImageList; 
    //gv.DataContext = objImageItem; 
} 

public class ImageItem //: INotifyPropertyChanged 
{ 
    /*private ObservableCollection<ImageItem> _ImageList = new ObservableCollection<ImageItem>(); 
    public ObservableCollection<ImageItem> ImageList 
    { 
     get { return _ImageList; } 
     set { _ImageList = value; OnPropertyChanged("ImageList"); } 
    }*/ 

    public BitmapImage Source { get; set; } 
    public string Name { get; set; } 

    public ImageItem() 
    { 

    } 

    public ImageItem(IRandomAccessStream stream, string name) 
    { 
     BitmapImage bmp = new BitmapImage(); 
     bmp.SetSource(stream); 
     Source = bmp; 
     Name = name; 
    } 
} 

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 
     <Button Click="btnBrowsePhotos_Click" Style="{StaticResource BrowsePhotosAppBarButtonStyle}" /> 

     <!-- Add ItemsSource="{Binding ImageList}" to GridView --> 

     <GridView x:Name="gv"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <Grid> 
         <Image Stretch="Fill" Source="{Binding Source}" Height="192" Width="342" /> 
         <Border Opacity=".8" Background="Black" VerticalAlignment="Bottom" > 
          <TextBlock Text="{Binding Name}" FontSize="18"/> 
         </Border> 
        </Grid> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
      <GridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapGrid MaximumRowsOrColumns="3" /> 
       </ItemsPanelTemplate> 
      </GridView.ItemsPanel> 
     </GridView> 
    </StackPanel> 
</Grid>