Add Control programmatically, UI is not updating

Question

I am just playing arround with .Net MAUI. I want to retrieve information from a Rest service and based on the result I want to add Buttons programmatically to a VerticalStackLayout. When I debug the solution the buttons are added to the VerticalStackLayout but the UI is not updated.

Here the code Snippet

var  btn  = new Button();
btn.Text = "Button " + count + " added";
btn.Clicked += OnCounterClicked;
btn.HorizontalOptions = LayoutOptions.Center;
VLayout.Add(btn);

Here the XAML

  <ScrollView>
    <VerticalStackLayout x:Name="VLayout"
        Spacing="25" 
        Padding="30,0" 
        VerticalOptions="Center">
        <Image
            Source="dotnet_bot.png"
            SemanticProperties.Description="Cute dot net bot waving hi to you!"
            HeightRequest="200"
            HorizontalOptions="Center" />            
        <Label 
            Text="Hello, World!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" />        
        <Label 
            Text="Welcome to .NET Multi-platform App UI"
            SemanticProperties.HeadingLevel="Level2"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I"
            FontSize="18"
            HorizontalOptions="Center" />
            <Entry x:Name="entry"
       Placeholder="Enter text"
       TextChanged="OnTextChanged"
       Completed="OnTextCompleted" />           
        <Button 
            x:Name="KommenBtn"
            Text="Kommen"
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnCounterClicked"
            HorizontalOptions="Center" />
        <Button 
            x:Name="GehenBtn"
            Text="Gehen"
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnCounterClicked"
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ScrollView>

Thanks in advance for your hints & help! BW

Did you get any solution for this? – ac-lap Jun 02 '23 at 19:47 — ac-lap, Jun 02 '23 at 19:47

ToolmakerSteve · Answer 1 · 2022-07-31T18:51:10.590

3

To update UI after a change that affects the hierarchy (or positions) of controls:

    (VLayout as IView).InvalidateArrange();

NOTE: This is roughly equivalent to Xamarin.Forms layout.ForceLayout();

If not already in code running on UI MainThread, wrap it in Dispatch:

Dispatcher.Dispatch(() =>
    (VLayout as IView).InvalidateArrange());

edited Jul 31 '22 at 18:51

answered May 21 '22 at 06:37

ToolmakerSteve

18,547
14
94
196

1

Hello, thanks for your answer!! Unfortunately the bevahior still stays the same, UI isn't updated. Do you have an additional hint? thanks in advance & BW – Peter K. May 27 '22 at 04:07

score 2 · Answer 2 · answered May 27 '22 at 05:45

Try to update UI on main thread , you can wrap your code into Application.Current.Dispatcher.Dispatch .

Sample code

Application.Current.Dispatcher.Dispatch(() =>
{
    var  btn  = new Button();
    btn.Text = "Button " + count + " added";
    btn.Clicked += OnCounterClicked;
    btn.HorizontalOptions = LayoutOptions.Center;
    VLayout.Add(btn);
    
});

Add Control programmatically, UI is not updating

2 Answers2

Sample code

Linked