prosa
prosa

Reputation: 79

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

Upvotes: 1

Views: 4661

Answers (1)

Mario Galván
Mario Galván

Reputation: 4032

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

Upvotes: 4

Related Questions