A ContentPage Wrapped in a TabPage Wrapped in a NavigationPage

A redesign adds a NavigationBar at the top so the application name can be displayed along with a Settings button on the Buy page and an Add button on the Add page.

Viand-Mockup-2

A ContentPage doesn’t have a NavigationBar at the top so the solution was to “wrap” the TabPage in a NavigationPage. The code changed from this:

public class App : Application
{
    public App()
    {
        MainPage = new TabPage {
           Children = { new BuyPage(), new AddPage() }
        };
    }
 }

To this:

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

Adding BuyPage and AddPage as children was moved into the TabPage constructor (where I think it really belongs anyway).

public class TabPage : TabbedPage
{
	public TabPage()
	{
		Title = "Viand";
		Children.Add(new BuyPage());
		Children.Add(new AddPage());
	}
}

Buttons are added to a NavigationBar by adding a new ToolbarItem to each ContentPage’s ToolbarItems collection.

// BuyPage
ToolbarItems.Add(new ToolbarItem {
	Text = "Settings",
	Icon = "106-sliders.png",
	Order = ToolbarItemOrder.Default,
	Command = new Command(() => Navigation.PushAsync(new SettingsPage()))
});

// Add Page
ToolbarItems.Add(new ToolbarItem {
	Text = "Add",
	Icon = "187-pencil.png",
	Order = ToolbarItemOrder.Default
});

Specifying Text and not an Icon for a ToolbarItem displays the text as an iOS 7-style button.

Viand-Toolbar-No-Icons

Specifying an Icon suppresses the ToolbarItem text.

Viand-Toolbar-Icons

For now I’m going to leave the toolbar buttons as text–I like the way they look (I’m also already using the pencil icon for the Add tab).

This entry was posted in Side Projects, Software Development and tagged , , , . Bookmark the permalink.