Search code examples
iosnavigationxamarin.formsnavigationbartabbedpage

Xamarin forms iOS tabbed page with navigation page


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).


Solution

  • 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";
        }
    }
    

    enter image description here