Bind FlipView with ObservableCollection<writeablebitmap>

Question

I am developing a windows store application and need help in binding a flipView with an ObservableCollection<WriteableBitmap>

Below is the way i am doing it right now ,

XAML :

<FlipView x:Name="flipView" Grid.Row="1" Margin="0,0,20,0" ItemsSource="{Binding BitMapCollection}" Visibility="{Binding FlipViewVisibility}" >
</FlipView>

ViewModel :

ObservableCollection<WriteableBitmap> _bitMapCollection = new ObservableCollection<WriteableBitmap>();

public ObservableCollection<WriteableBitmap> BitMapCollection
{
    get { return _bitMapCollection; }
    set { _bitMapCollection = value; }
}

WriteableBitmap photoWriteableBitMap = await new WriteableBitmap(1, 1).FromContent(new Uri("ms-appx:///Curtain1.jpg"));
WriteableBitmap frameWriteableBitMap = await new WriteableBitmap(1, 1).FromContent(new Uri("ms-appx:///Window1.jpg"));

BitMapCollection.Add(photoWriteableBitMap);
BitMapCollection.Add(frameWriteableBitMap);

The images in the flipview are blank. Nothing shows up. Is there any way ObservableCollection<WriteableBitmap> can be bound to the XAML directly ?

Answer 1

I haven't tried it with WriteableBitmap, but below should work with standard Image class (e.g. set the Image's Source to that of photoWriteableBitMap and bind to a collection of Image)

Essentially, you'd need to define a DataTemplate like so:

    <FlipView x:Name="flipView"                   
          ItemsSource="{Binding BitMapCollection}" 
          Visibility="{Binding FlipViewVisibility}"             
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Image Width="200" Height="200" Source="{Binding}" />
                </DataTemplate>
            </FlipView.ItemTemplate>    
    </FlipView>

Answer 2

Alternatively, you could bind to an observable Collection of bitmap Images. Please refer to my implementation of this here FlipView: HowTo bind a Collection<string> as ItemsSource