3

In our WinRT app, we have provided image as a background to grid and buttons through XAML.

We observed that images taking long time to load, app showing only other text controls (like TextBlock) first, then after some duration, our images loaded. Till the time we only see text controls in page.

We are setting background as below

<ImageBrush ImageSource="ms-appx:////Images/image.png"/>

Please let me know, what can we do to resolve this issue.

Thanks.

patel kavit
  • 484
  • 1
  • 6
  • 22

3 Answers3

1

You can

  • reduce the resolution of the image
  • wait for it to load before you show the page - either by starting that earlier somehow or by showing the page completely black and, say, fading in when the image loads
  • use a lower resolution image or other asset until the image loads
  • not use that image at all

I have a hunch that if the image source gets set early enough - WinRT will wait for a short time (a fraction of a second) before it shows a new page to give the image a chance to load before it starts running transition animations etc., so lowering the image resolution altogether or using a lower resolution before a higher resolution one loads is one approach.

one more option is to have a background be outside of the root frame - e.g. modify App.xaml.cs to have a grid as root visual and put the background image and the frame inside of it so you can change the image at any time.

Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
  • Actually the grid background image is 1.5 MB in size and it is 1366x768 in resolution, which covers whole device screen and serves as background to my page. So, It takes longer time to load, if I change the resolution than it will not look good if we stretch it. – patel kavit Feb 22 '13 at 09:16
  • Background images are often washed out and in that case lower resolution isn't that jarring, but you have other tools to fix it. – Filip Skakun Feb 22 '13 at 14:30
0

This is a weird behaviour, However you can try to opt for images with smaller size/resolution to optimize rendering time.

Also, try to set the background image in the Page's constructor - Since, Microsoft may(I am not sure though) handle XAML Parsing via Async Operations

Arun Selva Kumar
  • 2,593
  • 3
  • 19
  • 30
0

Instead of ImageBrush try to use regular Image with CashMode property set to "BitmapCache":

<Grid>
    <Image Source="ms-appx:////Images/image.png"
           CacheMode="BitmapCache" />

    <!-- Your other content above background image -->
</Grid>
Sevenate
  • 6,221
  • 3
  • 49
  • 75