Windows 8 XAML：通过数据绑定在GridView中显示图像列表

Question

我正在尝试使用C#编写一个Windows 8应用程序，在该应用程序中，我想通过FileOpenPicker显示用户选择的图像列表。我希望使用XAML数据绑定在GridView中显示这些图像。我已经尝试了一些方法，但是数据绑定似乎无法正常工作。我不确定在哪个位置需要设置GridView的itemssource。如果我在MainPage构造函数中这样做，那么当用户选择图像后，数据绑定的列表得到填充时，GridView不会刷新。如何解决这个问题？

- Raman Sharma

Answer 1

更新 1

如果你想要绑定 GridView，那么你需要添加几个东西。看一下我已经更新了我的回答并添加了一些注释行。你需要添加这些行来通过 XAML 提供 ItemsSource。

---

给你。

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>

- Farhan Ghumra

---

能否通过XAML而非代码设置ItemsSource？ - Raman Sharma

是否有可能直接创建一个公共属性，而不是创建一个私有的后备存储，并将其设置为 ObservableCollection。例如 "public ObservableCollection<ImageItem> ImageList = new ObservableCollection<ImageItem>();"。在这种情况下，由于属性本身就是一个集合，我们不需要手动触发属性更改事件。但是，这种做法适用于 C++，却无法在 C# 中实现。 - Raman Sharma

不，你必须实现INotifyPropertyChanged，否则可能无法工作。虽然你可以尝试并让我知道结果。 - Farhan Ghumra