How to show a loading image in UWP?

Question

I am developing an UWP application. When user clicks on any control, if that control is taking longer time to execute its tasks I want to show an indication to the user like Operation is taking a long time, please wait with Images on the center of the screen. How can I do that in a UWP aplication?

I think here our UWP is working on Single Thread concept if I am right.
Please give me your suggestion to solve this issue.

Answer 1

The best way to indicate a long running operation is to use the built-in ProgressRing control:

<ProgressRing x:Name="LoadingIndicator" />

Your long running operation should be implemented as an async method. You could call it as follows:

try
{
    LoadingIndicator.IsActive = true;
    await LongOperationAsync();
}
finally
{
    LoadingIndicator.IsActive = false;
}

Setting IsActive to true will display the progress ring and start the spinning. Setting it back to false will hide and deactivate it again. While LongOperationAsync is executing, the application will be responsive and the user will be able to interact with it.

If you're using MVVM, you can of course set a boolean property instead and bind it to IsActive property.

Not sure, where you've heard about a "single thread concept" for UWP apps, but nothing is stopping your app from being multithreaded. Indeed, you can't use the Thread class directly, but you should use Task instead anyway.

Answer 2

您可以使用FFImageLoading它使用各种方法来优化图像加载（包括下载/内存缓存），还支持加载/错误占位符：

<ff:FFImage VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TransformPlaceholders="False" LoadingPlaceholder="loading.png" ErrorPlaceholder="error.png" Height="500" Width="500" Source="http://loremflickr.com/600/600/nature?filename=simple.jpg">