How do I convert an existing Xamarin application to use Shell?

Question

I am struggling to find a way into using the new Shell navigation. All of the examples seem to be horrendously complex. They demonstrate all the things it can do but make it difficult to answer very simple questions such as:

1. How do I set the 'Home' page for the application? (I understand that setting App.MainPage = new AppShell() does this but how do I register my main application page as the 'root' for the application?)
2. How does each ContentPage know what its view-logic type is and how and when is the view-logic constructed?
3. Can I simply have a Shell that contains ContentPage instances? In other words, do I have to use Flyouts, which seem to be everywhere in the documentation?

Does anyone know of a simple 'Hello world' type intro to Xamarin Shell?

Any help would be very gratefully received.

Kind wishes - Patrick

Answer 1

but how do I register my main application page as the 'root' for the application

Hi, PatrickRyder. What effect do you want for the root page? After creating the AppShell class, we need to describe the visual hierarchy of the Shell application using FlyoutItem or TabBar. The page of the first item will be the shown when launching the application by default. You could also define that in code behind.

In other words, do I have to use Flyouts, which seem to be everywhere in the documentation

No. If you use TabBar as the visual hierarchy, the flyout will be disabled.

<Shell>
    <TabBar>
        <Tab Title="page_1" >
            <ShellContent ContentTemplate="{DataTemplate local:Page1}"/>
        </Tab>
        <Tab  Title="page_2">
            <ShellContent ContentTemplate="{DataTemplate local:Page2}"/>
        </Tab>
    </TabBar>
</Shell>

When using FlyoutItem in shell application, we can also disable the flyout by setting FlyoutBehavior to Disabled.

<Shell ...
    FlyoutBehavior="Disabled">
    <FlyoutItem>
        <Tab Title="main_page" >
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}" TabIndex="1" />
        </Tab>
        <Tab  Title="page_1">
            <ShellContent ContentTemplate="{DataTemplate local:Page1}" IsVisible="True" TabIndex="0"/>
        </Tab>
    </FlyoutItem>
</Shell>