Launching our app!

To get our application off the ground, we need to set the top-level UI element. Our options are as follows:

• A single fixed ContentPage

• A root NavigationPage that can Push and Pop other pages

• A TabbedPage

• A FlyoutPage (advanced)

• Anything that derives from Microsoft.Maui.Controls.Page

For this sample we're going to use a TabbedPage, or more specifically, an AdaptedTabbedPage, because at the time of writing, the TabbedPage is unsuitable on the Windows platform until this bug is fixed

Open App.xaml.cs and replace the content with the following:

using FunctionZero.Maui.MvvmZero;
using MvvmZeroTutorial.Mvvm.PageViewModels;

namespace MvvmZeroTutorial
{
    public partial class App : Application
    {
        public App(IPageServiceZero pageService)
        {
            InitializeComponent();
            
            // Don't forget to call pageService.Init, or navigation will not work properly!
            pageService.Init(this);
            
            var rootPage = pageService.GetMultiPage(VmInitializer, typeof(ReadyPageVm), typeof(SteadyPageVm), typeof(GoPageVm));
            var a = new ContentPage();
            MainPage = rootPage;
        }

        private bool VmInitializer(object viewModel)
        {
            if (viewModel is ReadyPageVm)
                return false; // Do not wrap the ReadyPage in a NavigationPage.

            return true;
        }
    }
}

There are a few things going on here. We're injecting an IPageServiceZero into the constructor, but we didn't register it, what gives? The UseMvvmZero in MauiProgram.cs call registers the IPageServiceZero implementation for us. Note: NavigationPage is also registered, because it is used internally. Everything else is our responsibility, including the MultiPage!

MvvmZero delegates the creation and lifetime of objects to the container, so when we call GetMultiPage we get back whatever we registered for MultiPage<Page>, in this case a Singleton AdaptedTabbedPage

The first parameter is a Func that is called for each PageVm we want to present. It should return true if we want the corresponding ContentPage wrapped in a NavigationPage (so we can push pages on to it) or false otherwise.

In this sample, the first Tab does not support a navigation stack, the others do.

Build and run, and you ought to see an app with a root TabbedPage containing 3 tabs.