Xamarin forms iOS tabbed page with navigation page

Question

So, Xamarin advocates, and others, I invite you all to try and answer how can I have navigation page with tabbed page for iOS?

Sounds pretty simple, does it not? For android, no worries, no issues, nothing out of the ordinary, can customize anything I need.

For iOS on the other hand, despite me being told that I am the one who does not comprehend the practices of Xamarin (or in other words, the escape routes one needs to take in order for that to actually work), I can not have navigation page and tabbed page coexisting, without issues.

Here is what happens:

if (navigation page contains tabbed page)
{
    no title is shown in the navigation bar
}
else if (each content page for the tabbed page is contained in a navigation page)
{
    no icon or title is shown in the tab bar
}
else
{
    The company manager does not want any else, there has to be a navigation page to allow opening other pages from the contents in each tab, and there has to be tabbed page and navigation bar for iOS
}

Now the million dollar question as they say in USA: how can we solve this "mystery"?

Thank you so much in advance, for all the answers and support (on using this sort of.. ah, tool, also known as Xamarin).

Are you using any MVVM framework? Do you give your ContentPage a Icon and title? — Gerald Versluis
no, and yes. no framework is being followed, manager orientarions. I personally tried that mvvm, but ended up prefering mvc, less robotic and less complicated for me. as for the content page, I have set both the icon, title, in the contentpage and when setting the tabbed page, but had to end up setting it to each navigation page, on each child of this tabbed page. — tl_

Mario Galván Mario Galván · Accepted Answer · 2016-06-15T13:11:24

So this is what I have done. In your App.cs (or main project class) you need to create a new NavigationPage that contains your TabbedPage, with the navigation controller you will have a navigation context and with that you can Push you next pages, if you don't want to have a navigation bar at the top you can push ModalPages or use NavigationPage.SetHasNavigationBar(this, false); ,code snippet:

public class App : Application
{
    public App ()
    {
        MainPage = new NavigationPage(new MainTabbedPage());
    }
}

public class MainTabbedPage : TabbedPage
{
    public MainTabbedPage()
    {
        Children.Add(new FirstPage());
        Children.Add(new SecondPage());
    }
}

public class SecondPage : ContentPage
{
    public SecondPage()
    {
        Title = "Second Page";

        var btn = new Button
        {
            Text = "Click me"
        };

        btn.Clicked += BtnBlicked;

        Content = btn;
    }

    async void BtnBlicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new ThirdPage());
    }
}

public class ThirdPage : ContentPage
{
    public ThirdPage()
    {
        Title = "Third Page";
    }
}

Xamarin forms iOS tabbed page with navigation page

1 Answers