Question

Suppose I have a variable number of static image resources that I would like to show rapidly.

So I have an INotifyPropertyChanged class with

for (blah)
    bitMaps.Add(new BitmapImage(new Uri(blah + i + ".png")));

in a list and a property to get the images

public ImageSource Image
{
    get
    {
        return bitMaps[Index];
    }
}

along with

public int Index
{
    set
    {
        _Index = value;
        OnPropertyChanged("Image");
    }
}

so that I can change the displayed image by changing Index.

I then have a bound Image tag <Image Source="{Binding Image}" Stretch="None" /> to display it.

But despite seemingly loading the bitmap images initially, the transitions when changing Index still flickers on the first time leading me to thing that the BitmapImage are lazy loading. Is there a better/more performant way of doing this? Or how can I pre-load the images properly?

Update: I ended up just creating a user control with all the Image tags created and invisible…

Answer 1

You will always get that flicker when modifying the source of the Image. If you want to have the images preloaded, then you can put them in the Visual Tree. My first recommendation is using a FlipView like this:

<FlipView ItemSource="{Binding Bitmaps}" SelectedIndex="{Binding Index}">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" />
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

When you change the index, the FlipView will show the next/previous image, which is already preloaded.

If you have hundreds of images, then write your own custom control that cycles through images.

But either way, if you change the source of an image, there will be a gap between discarding the old bitmap and rendering the new bitmap.