How to display a stream of images in FlipView?

Question

I just started learning how to develop some very simple Windows 8 apps a couple of weeks ago and wanted to make a photo gallery app that could select multiple images from my local Pictures folder and then display them in FlipView.

So far most of the tutorials that I found were just hard coding the images like below.

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

I started out the project from this site (http://msdn.microsoft.com/en-us/library/windows/apps/jj655411.aspx) and just made some changes. Currently this is what I have in my XAML

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

And this for my behind code.

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
            }
        }

What happens when I run the program is that I am able to select multiple files but only able to display 1 picture. I'm pretty sure this happens because I declared an Image in my FlipView which causes the selected images to overlap themselves on that one Image. How do I make them to appear in FlipView?

Answer 1

Either give a name to the FlipView like MyFlipView and write MyFlipView.ItemSource = Images;

or

in XAML bind the ItemSource property of the FlipView like so

ItemsSource="{Binding}"

Also be careful in your code because you reuse the variable name Images multiple times and its probably the reason of the problem. Create a separate List images field, add the photos to that list one by one and then set that field as ItemsSource for the FlipView.