Matt
Matt

Reputation: 63

UWP Image sometimes not visible until after page resize

I've got a pretty standard UWP xaml windows 10 app which contains several images on the main page about 50 i'd say.

I've defined the images in the normal way using the Image xaml tag and specifying the source property of the image to reference items in my apps Assets folder,

<Image Source="Assets/Image1.png"/>

I'd say 75%-80% of the time my app launches fine and all the images are visible in the right spots and at the right size etc... However on occasion i launch the app and a few images are not visible. Typically this is between 1-3 images. As soon as i resize the app or trigger an event that changes the image source the missing images are displayed.

Also the images have a Tapped event handler on them. When the image is not visible if you click the spot where the image is meant to be, the tapped handler gets invoked.

I'm at a bit of a loss to figure out what might be causing this issue. It's almost like the images are not loading in time or the GUI is not receiving a page refresh event after the image has loaded. Like i said resizing the app fixes the problem.

Any suggestions would be greatly appreciated. Thanks in advance for any help.

Upvotes: 6

Views: 1176

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39082

This problem usually happens when the system is low on memory so it doesn't load some images to lower the load. Loading 50 images, especially if they are large probably will cause such problem.

Setting CacheMode of your images to "BitmapCache" might help (see documentation - for WPF, but more detailed than UWP documentation). Otherwise I recommend making sure your images are not larger than necessary, because that would put unwanted stress on the machine.

In addition, you can use DecodePixelWidth and DecodePixelHeight properties to specify at what size should the images be loaded. This can be useful when you are for example displaying large photos in a thumbnail area. Setting DecodePixel properties will optimize the loading process for JPEG and PNG images so that the whole photo does not have to be loaded from the disk to the memory (see documentation).

Update

As per @JohnnyWestlake's suggestion you might want to look into the documentation for more tips on image optimization. There are multiple useful tips that will help keep the memory footprint of the images as low as possible.

Upvotes: 2

Related Questions