Xamarin Forms Navigation page inside shell

Question

UPDATE

I used @Deczaloth his awnser, but I still end up with a black content page. Here is my current xaml file:

<?xml version="1.0" encoding="utf-8" ?>
<transition:TransitionShellPage xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:transition="clr-namespace:Memento.PageTransitionControls"
       xmlns:local="clr-namespace:Memento"
       Title="ShellTest"
       x:Class="Memento.AppShell"
       BackgroundColor="#212121">

    <Shell.FlyoutHeader>
        <local:SideMenuHeader />
    </Shell.FlyoutHeader>

    <Shell.TitleView>
        <Image Source="Title_Dark.png" HeightRequest="30" VerticalOptions="CenterAndExpand" />
    </Shell.TitleView>

    <Shell.ItemTemplate>
        <DataTemplate>
            <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" Padding="30, 15, 0, 15">
                <Image Source="{Binding Icon}" HeightRequest="35" />
                <Label Text="{Binding Title}" TextColor="White" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" />
            </StackLayout>
        </DataTemplate>
    </Shell.ItemTemplate>

    <FlyoutItem Title="SideNav"
                Shell.TabBarIsVisible="False"
                FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Home" Icon="Home_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}"/>
        <ShellContent Title="Search" Icon="Search_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Messages" Icon="Chats_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Favorites" Icon="Favorites_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Settings" Icon="Settings_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>

</transition:TransitionShellPage>

And here is the C# behind the code:

public partial class AppShell : TransitionShellPage
{
    public AppShell()
    {
        InitializeComponent();
    }
}

And finally, the screenshot of my current app result: Now what am I doing wrong, because I think I followed his awnser!

Any suggestions!?

Answer 1

Basically your problem is one of concept, as i see it. You are trying to combine two different Navigation paradigms! The whole idea of Shell is to provide a different Navigation paradigm as was available with NavigationPage, so my advice would be: Rethink your approach.

---

Possible alternative:

Since as i see, the only purpose of using your custom NavigationPage is to define the BindableProperty TransitionType, i would suggest that you create in a similar way a custom Shell as follows:

using Xamarin.Forms;

namespace ShellTest
{

    public class TransitionShellPage : Shell
    {
        public static readonly BindableProperty TransitionTypeProperty =
                BindableProperty.Create("TransitionType", typeof(TransitionType), typeof(TransitionNavigationPage), TransitionType.SlideFromLeft);

        public TransitionType TransitionType
        {
            get { return (TransitionType)GetValue(TransitionTypeProperty); }
            set { SetValue(TransitionTypeProperty, value); }
        }
    }
}

Then you can simply make your traditional AppShell inherit from that custom Shell class as follows:

Xaml:

<?xml version="1.0" encoding="UTF-8"?>
<this:TransitionShellPage xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:this="clr-namespace:ShellTest"
       xmlns:local="clr-namespace:ShellTest.Views"
       Title="ShellTest"
       x:Class="ShellTest.AppShell">

    <TabBar>
        <Tab>
            <ShellContent>
                 <!-- This launches your HomePage -->
                <local:HomePage />
            </ShellContent>
        </Tab>
    </TabBar>

</this:TransitionShellPage>

C#:

public partial class AppShell : TransitionShellPage
{
    public AppShell()
    {
        InitializeComponent();
    }
}

Then you just call this from App.xaml.cs like:

public App()
{
    InitializeComponent();

    MainPage = new AppShell();
}

Read more on Shell in the MSDN docu, or other post on the topic like this from Eduardo Rosas.