Temporarily pausing UI updates

[JDr111]

Suppose that we have a control with a main Panel, which in turn contains "other panels and grids", which contain the "functional controls" the user actually interacts with. The layout of this main Panel needs to be changed during run-time from code-behind, which involves removing the children "functional controls" from their current place in the visual tree, removing/re-organizing the "other panels and grids", and finally re-inserting the "functional controls" to their new places. This results in a brief "flash" in the UI as a result of a finite time needed for the reorganization and re-insertion to take place. Is it possible to temporarily pause UI updates in Avalonia, and resume them only once all controls and their "parent-child" relationships are reorganized?

Thanks!

EDIT: I'm new to Avalonia, so it's entirely possible my approach to this question is not optimal, and what I'm seeking to achieve can be achieved in different ways. Any insights will be helpful!

[maxkatz6]

Is it possible to temporarily pause UI updates in Avalonia

Avalonia will not re-render UI nor re-layout UI on every change to the tree. It will schedule a dispatcher job to do it on the next event loop tick.
Saying this, updating visual/logical tree by itself might be a slower task, especially if any controls have a heavy event handler for that process.

I would say, you should profile your project to see which parts exactly are slow and start from there.

[JDr111]

Thanks for the insight, it's profiling time then. I'll see if there's anything that could be optimized.

[JDr111]

I've found a way to prevent the "flashing" effect. Inspired by the TransitioningContentControl (which can also be used to achieve the same goal), the removal of the old content is done in an overridden ArrangeOverride function. The whole process thus looks as follows:

XAML (UserControl attributes omitted for brevity):

<UserControl ...>
    <Panel Name="contentPanel">
        <!-- Content is managed in code-behind based on, for instance, an ItemTemplate similar to ComboBox.ItemTemplate -->
    </Panel>
</UserControl>

Code-behind:

public class CustomControl : UserControl
{
    private Control ctlRemove = null;

    public CustomControl()
    {
        InitializeComponent();
    }

    ...

    // This method is called by, for instance, an event
    private void ReplaceContent(Control ctlNewContent)
    {
        if (this.contentPanel.Children.Count > 0)
        {
            ctlRemove = this.contentPanel.Children[0]; // Old content
            this.contentPanel.Add(ctlNewContent); 
            // or: this.contentPanel.Insert(0, ctlNewContent);
        }
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        Size result = base.ArrangeOverride(finalSize);
        
        if (ctlRemove != null)
        {
            this.contentPanel.Children.Remove(ctlRemove);
            ctlRemove = null;
        }

        return result;
    }

This results in the content changing without any visual artifacts. The removal can be optimized by using RemoveAt() instead of Remove(), and supplying the index of the element to be removed (either 0 or 1, depending on whether the new content was added to the beginning or the end of the Children array of contentPanel).

I'm now trying to understand what exactly is going on. Once the new content is added to the child controls of contentPanel, The "arrangement" is invalidated (I assume InvalidateArrange() is called somewhere in the background). This means that at the next event loop tick, the Layout, Arrange and Render passes are executed (is that correct?). Since in the arrange pass I remove the old content, this triggers another InvalidateArrange(), which causes the arrangement to be re-done on the second next event loop tick. This means on the first event loop tick, the Render pass renders both the old and the new content on top of each other, while on the second event loop tick, it only renders the new content. This prevents the content from disappearing altogether, and therefore preventing the "flash" from occuring (which really means that we briefly see the background being drawn instead of the content of the contentPanel).

Is my understanding of the situation correct? When exactly is the ArrangeOverride() function being called, and in what context?

[Gillibald]

https://docs.avaloniaui.net/docs/basics/user-interface/building-layouts/

[JDr111]

Thanks for the link! That does shed light on a few things.