Wait for image fully loaded and rendered

How-to Discussions
1

Is it possible to wait for images to be fully loaded and rendered before showing the page/panel?

I’m loading data and images from an API I made. I display both inside a ScrollView as in the News feed example. The JSON contains the link to the image so I display the images with a simple:

<Panel Dock="Left">
    <StackPanel>
        <Image Url="{image}" Width="100" Margin="0,0,10,0" Alignment="TopLeft" CachingMode="Optimized" />
    </StackPanel>
</Panel>

As the feeds (or news) are more than 100 it happens that, while the text is dowloaded immediately, the above panel remains empty until is populated with the images.

Is there a way to wait that the ScrollView is fully rendered before it is displayed?

2

Hi Enrico,

sorry for the delayed response.

I will have to answer your question indirectly, because while there is a solution to the challenge you’re describing, it is not “waiting until ScrollView is fully rendered”.

What you should do is create an [optionally animated] placeholders for your list items. You can toggle their visibility with the WhileBusy trigger. In your case, a parent node (the list item ux:Class) containing your Image tags will be marked as busy for as long as the image is downloading.

You can take a look at our WhileBusy example which employs this exact strategy.

Hope this helps!