New tabs are not rendered until selected

[sakya]

In CefGlue.Demo.Avalonia when you open a new tab the browser doesn't render the page until the tab is selected. Is there a way to let the browser download resources and start rendering the page even if it's still not visible?

OS: Windows 11

[joaompneves]

Thats more an Avalonia behavior rather than a CefGlue behavior. The tabs are lazy loaded, ie, the content doesn't get rendered until first shown.

[sakya]

Also CefGlue.Demo.WPF has the same behaviour

[joaompneves]

My point is that Its not a CefGlue issue. You need to somehow to force the tab content to be rendered.

[sakya]

Ok, thanks I'll try.

Btw the problem is not to render the page but the fact that if the control is not visible CEF does nothing: even the tab title is "New tab" until the tab is selected. This should mean that CEF doesn't event start to open the url until the control is rendered.

[joaompneves]

As I said, the contents of the tab item are lazy loaded. If you put a simple Border control inside the tab item you will see that the loaded event of that border will only fire when you select its parent tab item. Same happens with CefGlue, it only kicks off when the control is loaded.

[sakya]

I came up with a "dirty trick": add the browser to a Grid and move it to the tab content when the control is loaded. I had to add the Grid because when adding the BrowserView directly to the DockPanel the browser was visible for some milliseconda.

MainWindow.axaml

    <Grid Name="mainGrid">
        <DockPanel>
            <Menu Name="mainMenu" DockPanel.Dock="Top">
                <MenuItem Header="_File">
                    <MenuItem Header="_New Tab" Click="OnNewTabMenuItemClick" />
                    <MenuItem Header="_Open Dev Tools..." Click="OnOpenDevToolsMenuItemClick"/>
                    <MenuItem Header="_Evaluate Javascript" Click="OnEvaluateJavascriptMenuItemClick" />
                    <MenuItem Header="_Bind Javascript Object" Click="OnBindJavascriptObjectMenuItemClick" />
                </MenuItem>
            </Menu>

            <TabControl Name="tabControl">
            </TabControl>
        </DockPanel>
    </Grid>

MainWindow.axaml.cs

        private void CreateNewTab()
        {
            ...
            var mainGrid = this.FindControl<Grid>("mainGrid");
            if (mainGrid != null)
            {
                view.Height = 0;
                view.Width = 0;
                view.Loaded += (sender, args) =>
                {
                    if (sender is BrowserView tView)
                    {
                        mainGrid.Children.Remove(tView);
                        tView.Height = double.NaN;
                        tView.Width = double.NaN;
                        tab.Content = tView;
                    }
                };
                mainGrid.Children.Add(view);
            }