I'm trying to avoid using a hamburger menu and started a project with a tabbed page. The project has 6 tabs, and the behavior on iOS 9.1 is to display the first four tabs and a "More" tab. My issue is that the pages presented by the "More" tabs have their navigation bar replaced. Additionally, content is hidden by the replacement bar. I also need to know how to style the navigation bar on the intermediary "More" screen created by the OS.
Please run the example project below (Xamarin Forms PCL project with all defaults, paste this into the project.cs file)
public class App : Application
{
public App ()
{
MainPage = new TabTest ();
}
}
public class TabTest : TabbedPage
{
public TabTest()
{
Title = "Tab Test";
this.Children.Add (new NavigationPage(new ContentTest ("Test 1")) { Title = "Tab 1", BarBackgroundColor = Color.Yellow });
this.Children.Add (new NavigationPage(new ContentTest ("Test 2")) { Title = "Tab 2", BarBackgroundColor = Color.Yellow });
this.Children.Add (new NavigationPage(new ContentTest ("Test 3")) { Title = "Tab 3", BarBackgroundColor = Color.Yellow });
this.Children.Add (new NavigationPage(new ContentTest ("Test 4")) { Title = "Tab 4", BarBackgroundColor = Color.Yellow });
this.Children.Add (new NavigationPage(new ContentTest ("Test 5")) { Title = "Tab 5", BarBackgroundColor = Color.Yellow });
this.Children.Add (new NavigationPage(new ContentTest ("Test 6")) { Title = "Tab 6", BarBackgroundColor = Color.Yellow });
}
}
public class ContentTest : ContentPage
{
public ContentTest(string title)
{
Title = title;
Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
Content = new StackLayout {
Children = {
new Label { Text = title, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) }
}
};
}
}
When you run the project, you'll see that the first four tabs behave as expected - yellow background color for the navigation bar, and the label is clearly visible. However, if you click on the "More" tab, the intermediary screen is displayed with a non-yellow navigation bar; if you select one of the items, the screen is displayed with a non-yellow bar which obscures the label. (If you modify the padding in the ContentTest class to 80, the labels become visible.)
Thoughts on how to address these issues?
Thanks!