异步加载TabItem

Question

Is it possible to load tabitems asynchronously? In my case, I have a tab control that contains a few tabitems. When the user clicks on one tabitem, the application freezes for a short time, to load the tabitem.

Now I want to change that. When the user clicks on a tabitem, an animation will be shown and after the tabitem is loaded completely, the tabitem will be shown.

Anyone an idea?

Answer 1

It depends on what is taking a long time to load.

If the data is causing the pause, then load the data asynchronously and display a placeholder while the data loads. Once the data has finished loading, you can change it to your actual content.

Here's one example,

<ContentControl>
    <ContentControl.Style>
        <Style TargetType="{x:Type ContentControl}">
            <Setter Property="ContentTemplate" Value="{StaticResource TabContentTemplate}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsLoading}" Value="True">
                    <Setter Property="ContentTemplate" Value="{StaticResource LoadingTemplate}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

Where your RelayCommand that changes the SelectedItem might look something like this:

void ChangeTab(ITabViewModel newTab)
{
    // Set loading flag and set tab as Selected
    newTab.IsLoading = true;
    SelectedTab = newTab;

    // Create async task
    var asyncTask = new Task(() => newTab.LoadData());

    // This runs after task is finished running
    asyncTask.ContinueWith(p => newTab.IsLoading = false));

    // Start async task
    asyncTask.Start();
}

If it's your UI that is taking a while to load, then users might just have to deal with an initial load time the first time the tab loads, however you can stop the delay when switching to an already loaded tab by extending the TabControl to keep it from destorying it's TabItems .

The default behavior of WPF's TabControl is to unload a TabItem when you switch to a different tab and reload it when you go back. This workaround stores the ContentPresenter of an already loaded tab, and will reload the saved tab instead of loading a new tab when switching back.

In most cases, the UI delay is caused by a very large number of UI elements on the screen. Try and reduce the number of elements on the tab as well. For example, Labels consist of more elements than TextBlocks , so unless you need label-specific capabilities like selection try to use Labels instead of TextBlocks