Correct way of updating Property so that loading doesn't stop UI?

Question

Sorry about the headline but it was the best I could come up with. Let me explain my problem: I have a WPF application that has a Menu looking much like your standard top menu that only takes up 5% of the screen. Click a menu item and the view below changes. The menu control is home-brewed because of reasons: Dynamic changes to menu-items, weird UI that doesn't fit existing controls, etc.

The menu changing view part is done using a ContentControl that binds to a "CurrentMenuView" property. When a menu item is clicked, this happens (pseudo-code):

private async void Button_Pressed(...)
{
   await MakeSomeVisualMenuChanges();
   CurrentMenuView = new CarsView();
   await MakeSomOtherStuff();
}

The problem is that some views take some time to load, which makes the other steps happen slow also. I'd like to start loading the "CarsView" but at the same time (not after) continue with the other changes. So the user can see stuff happening.

I can solve this by using Task.Run() but that seems wrong as it puts stuff in a different context.

What is the correct / better way of dealing with this?

EDIT:

Thanks for all answers, as I expected this is not easy to explain. Let me try with a simple example:

MainWindows.xaml:

<Window x:Class="WpfApp32.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="300" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>

        <Button Grid.Row="0" Width="50" Content="Click" Click="Button_Click"  />
        <ContentControl Grid.Row="1" Width="200" Height="200"  Content="{Binding PageContent, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
        <TextBlock Grid.Row="2" Text="Bottom" Width="300" x:Name="BottomText" />
    </Grid>
</Window>

Code-Behind:

using System.Windows;
using System.ComponentModel;

namespace WpfApp32
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            BottomText.Text = "AndNowforSomethingCompletelyDifferent";
            PageContent = new UserControl1();
        }

        private object pageContent;
        public object PageContent
        {
            get => pageContent;
            set
            {
                pageContent = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(PageContent)));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

    }
}

UserControl1.xaml:

<UserControl x:Class="WpfApp32.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Loaded="UserControl_Loaded"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock x:Name="CtrlTextBlock" Width="100"/>
    </Grid>
</UserControl>

UserControl1.cs:

using System.Windows;
using System.Windows.Controls;

namespace WpfApp32
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        private void Init()
        {
            System.Threading.Thread.Sleep(2000);
            CtrlTextBlock.Text = "Loaded";
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            Init();
        }
    }
}

So this is stripped from async etc and just showing the issue. When the button is pressed, the UserControl1 is loaded but it takes 2 seconds to load. Until then, the text in the "BottomText" element remains unset.

As I said before, I can solve this by doing something like this in the button click:

private void Button_Click(object sender, RoutedEventArgs e)
{
    BottomText.Text = "AndNowforSomethingCompletelyDifferent";
    System.Threading.Tasks.Task.Run(() => Application.Current.Dispatcher.Invoke(() => PageContent = new UserControl1()));
}

But not sure that is the way to go. So the basic issue here, is that a ContentControl is bound to a property and setting that property might take some time. While that is loading I don't want execution in the MainWindow to be halted (I want the BottomText element to display "AndNowforSomethingCompletelyDifferent" immediately).

Answer 1

Here's an example that simulates 3 seconds of loading... It's not an extremely complex UI and binding to complex DataTemplates, especially nested, can slow things a bit but normally the drag comes from pulling the data.

The trick is having a clever UI that keeps things moving but also lets the user know it's waiting on something else to continue. The infamous loading bar for example... Not that I would use that exact process but that's the right idea.

Note and disclaimer: I almost despise code behind unless it's in a custom control of some type; never in the view. I always prefer MVVM and using a ViewModel for binding; but not to build or control the UI only for the data the UI uses. All that said because this example is none of that. I simply made the controls on the view and put the code behind for answering this question, with example, as simple as possible.

The View

<Window x:Class="Question_Answer_WPF_App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="500"
        Width="800">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <ToggleButton x:Name="menuButton"
                      Content="Menu"
                      Click="MenuButton_Click" />

        <!--I do not recommend binding in the view like this... Make a custom control that does this properly.-->
        <Grid x:Name="menu"
              Visibility="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=menuButton}"
              VerticalAlignment="Top"
              Grid.Row="1"
              Background="Wheat">
            <StackPanel x:Name="menuItems">
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
                <TextBlock Text="simulated...." />
            </StackPanel>
            <StackPanel Name="menuLoading">
                <TextBlock Text="Loading..."
                           FontSize="21" />
                <ProgressBar IsIndeterminate="True"
                             Height="3" />
            </StackPanel>
        </Grid>
    </Grid>
</Window>

Code Behind the View

using System.Threading.Tasks;
using System.Windows;

namespace Question_Answer_WPF_App
{
    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();

        private Task SimulateLoadingResourcesAsnyc() => Task.Delay(3000);

        private async void MenuButton_Click(object sender, RoutedEventArgs e)
        {
            menuItems.Visibility = Visibility.Collapsed;
            menuLoading.Visibility = Visibility.Visible;

            await SimulateLoadingResourcesAsnyc();

            menuItems.Visibility = Visibility.Visible;
            menuLoading.Visibility = Visibility.Collapsed;
        }
    }
}