FlipView: HowTo bind a Collection as Items

Question

Is there a smart way to bind a Collection<string> that contains the URLs of images to be shown in a FlipView?

Or do I have to provide the images in a Collection<Image>?

Answer 1

I know this answer is rather late, but you can also bind to a collection of images. The best way to achieve this is to use an observable collection of bitmaps rather than a collection. In your view model create a property that returns an observable collection of bitmaps

 // defines the binding property to the flipview
 private ObservableCollection<BitmapImage> _pictureGallery;
        public ObservableCollection<BitmapImage> PictureGallery
        {
            get { return _pictureGallery; }
            set
            {
                if (_pictureGallery != value)
                {
                    _pictureGallery = value;
                    onPropertyChanged("PictureGallery");
                }    

            }
        }


// This defines the property change event
public event PropertyChangedEventHandler PropertyChanged;
        private void onPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

In your xaml, you can define your flipview like this

 <Border Background="White">
                <FlipView x:Name="flipView" ItemsSource="{Binding PictureGallery}" Visibility="Visible" >
                    <FlipView.ItemTemplate>
                    <DataTemplate>
                                <Image Width="200" Height="200" Source="{Binding}" Stretch="UniformToFill" />
                    </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>
                </Border>

Note: Depending on how you want to create your bitmap Images, you have a file stream to set the source of the BitmapImage

BitmapImage BitImage = new BitmapImage();
BitImage.SetSource(stream);

Answer 2

You can use URLs binding those to Source attribute of an Image inside an ItemTemplate:

<FlipView.ItemTemplate>
   <DataTemplate>
       <Image Source="{Binding}" />
   </DataTemplate>
</FlipView.ItemTemplate>

flipView.ItemsSource = imageUrls;

An example of displaying images from Bing in a FlipView.