如何在FlipView中显示图像流?

时间:2013-11-07 07:31:29

标签: c# image xaml photo flipview

我刚刚开始学习如何在几周前开发一些非常简单的Windows 8应用程序,并希望制作一个照片库应用程序,可以从我的本地图片文件夹中选择多个图像,然后在FlipView中显示它们。

到目前为止,我发现的大部分教程都是对下面的图像进行硬编码。

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

我从这个网站(http://msdn.microsoft.com/en-us/library/windows/apps/jj655411.aspx)开始了这个项目,并做了一些改动。目前这是我在XAML中的内容

<FlipView x:Name="flpView" Grid.Row="1" Margin="10, 10, 10, 10" SelectionChanged="FlipView_SelectionChanged">
            <Image x:Name="image"/>
        </FlipView>

这是我背后的代码。

private async void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Add code to perform some action here.
            Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();
            openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
            openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;

            // Filter to include a sample subset of file types.
            openPicker.FileTypeFilter.Clear();
            openPicker.FileTypeFilter.Add(".bmp");
            openPicker.FileTypeFilter.Add(".png");
            openPicker.FileTypeFilter.Add(".jpeg");
            openPicker.FileTypeFilter.Add(".jpg");
            IReadOnlyList<StorageFile> files = await openPicker.PickMultipleFilesAsync();
            foreach (StorageFile Images in files)
            {

                // file is null if user cancels the file picker.
                if (Images != null)
                {
                    // Open a stream for the selected file.
                    Windows.Storage.Streams.IRandomAccessStream fileStream =
                        await Images.OpenAsync(Windows.Storage.FileAccessMode.Read);
                    // Set the image source to the selected bitmap.
                    Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =
                        new Windows.UI.Xaml.Media.Imaging.BitmapImage();

                    bitmapImage.SetSource(fileStream);
                    image.Source = bitmapImage;
                    this.DataContext = Images;
                }
                flpView.ItemsSource = Images; //This gave an excption
            }
        }

运行程序时会发生什么,我可以选择多个文件,但只能显示1张图片。我很确定会发生这种情况,因为我在FlipView中声明了一个图像,这会导致所选图像在一个图像上重叠。如何让它们出现在FlipView中?

1 个答案:

答案 0 :(得分:0)

为FlipView命名,如MyFlipView并写入 MyFlipView.ItemSource = Images;

在XAML中绑定FlipView的ItemSource属性,如此

的ItemsSource = “{结合}”

在您的代码中也要小心,因为您多次重用变量名称Images,这可能是问题的原因。创建一个单独的列表图像字段,将照片逐个添加到该列表,然后将该字段设置为FlipView的ItemsSource。