Binding 2 images inside a FlipView

Question

I have the same question asked here: Image overlay in a flipview

Except, I have binded the FlipView.ItemTemplate to a UserControl having 2 images. To be able to access the binded ImageSource from the MainPage.xaml.cs, I created 2 global variables in App.xaml.cs:

public static ImageSource Image1 { get; set; }
public static ImageSource Image2 { get; set; }

public static new App Current
{
    get { return Application.Current as App; }
}

I can set the first image in this way:

flipView.Items.Add(new Uri(BaseUri, Images[0]));

But if I bind the images in this way, nothing is displayed even the flipView:

App.Image1 = new BitmapImage(new Uri("ms-appx:///Assets/Images/page0.jpg"));

How should I bind them in a way they get generated automatically & consecutively from an array?

Answer 1

Create a new class:

public class MyImage
{
     public ImageSource Image1 { get; set; }
     public ImageSource Image2 { get; set; }
}

in your page, you have to load your images as List<MyImage>, (if index is odd, myImage.Image1 = yourImage, else myImage.Image2 = yourImage)

then, in your user control, bind your images to Image1 and Image2, and set the ItemsSource of your flip to the List<MyImage>