Asynchronously adding the child to stacklayout in xamarin form iOS

Question

I am adding the multiple view as child to a stacklayout in a loop. Page is rendering only after all children are being added. i want to show children that are added and a loading sign for the children which are being added.

i am doing like below,

for(int i= 0; i<30;i++){ myStackLayout.Children.Add(myView); }

How to make it asynchronous.

Where do you add children (in a xaml.cs file I presume) ? From your example I4m not sure it will make a difference to load children asynchronously... It will be fast too.. If children creation process take some times, can you add some code so that we can see the "whole" process? — KFactory, May 25 '18 at 07:39

SushiHangover · Accepted Answer · 2018-05-25T08:04:01.900

The easiest way is to run your "content/view creation" on a background thread and then when you need to add that content/view to the UI, add it on the main/UI thread (BeginInvokeOnMainThread).

Run the content creation on a non-main/UI thread:

Task.Run(async () =>
{
    var itemsAdded = await AddContentAsync();
});

Content creation example:

Note: We "show" the CREATING CONTENT label, then we create 20 Buttons and add them one at a time on the main/UI thread and also scroll to the new content as it it added, once the content is completed, we scroll back to the top and "hide" the CREATING CONTENT label.

Task<int> AddContentAsync()
{
    Device.BeginInvokeOnMainThread(() =>
    {
        topLayout.RaiseChild(loading);
        loading.IsVisible = true;
    });

    int itemsAdded = 0;
    for (itemsAdded = 1; itemsAdded < 21; itemsAdded++)
    {
        // Create your dynamic content view....
        var newContentView = new Button
        {
            Text = itemsAdded.ToString(),
            HorizontalOptions = LayoutOptions.CenterAndExpand
        };

        Device.BeginInvokeOnMainThread(() =>
        {
            dynamicStackLayout.Children.Add(newContentView);
            (dynamicStackLayout.Parent as ScrollView)?.ScrollToAsync(newContentView, ScrollToPosition.End, true);
        });
    }

    Device.BeginInvokeOnMainThread(() =>
    {
        (dynamicStackLayout.Parent as ScrollView)?.ScrollToAsync(0, 0, true);
        loading.IsVisible = false;
        topLayout.RaiseChild(scrollView);
    });
    return itemsAdded;
}

Results:

This solution did not work for me. it is still loading all the view at the same time. — shivanju0801, May 29 '18 at 06:49
@user8671622 The basics are create the view in a background thread and add it in the UI/main thread. If you do that you should be fine. — SushiHangover, May 29 '18 at 06:52
Thanks, that helped. I call the async method and created the view in that call. — shivanju0801, May 29 '18 at 12:50

Asynchronously adding the child to stacklayout in xamarin form iOS

1 Answers1

Run the content creation on a non-main/UI thread:

Content creation example:

Results:

Linked