[英]Windows 8 XAML: Displaying a list of images in a GridView through data binding
I am trying to write a Windows 8 app in C# in which I want to display a list of images that the user selects through FileOpenPicker. 我正在尝试在C#中编写一个Windows 8应用程序,其中我想显示用户通过FileOpenPicker选择的图像列表。 I wish to display these images in a GridView using XAML Data-binding. 我希望使用XAML数据绑定在GridView中显示这些图像。 I have tried a few things but the data-binding doesn't seem to work. 我尝试了一些东西,但数据绑定似乎不起作用。 I am not sure at what location exactly do I need to set the itemssource of the GridView. 我不确定在什么位置我需要设置GridView的itemssource。 If I do it in the MainPage constructor then the GridView doesn't get refreshed as the data-bound list gets populated later as the user selects the images. 如果我在MainPage构造函数中执行此操作,则GridView不会刷新,因为稍后当用户选择图像时,数据绑定列表会被填充。
How do I fix this? 我该如何解决?
UPDATE 1 更新1
If you want to bind GridView
, then you need to add few things. 如果要绑定GridView
,则需要添加一些内容。 See I have updated my answer with some comment lines. 请参阅我用一些注释行更新了我的答案。 You need to add those lines to supply ItemsSource
via XAML 您需要添加这些行以通过XAML提供ItemsSource
Here you go. 干得好。
C# 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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.