Previously I changed the MainPage in App.xaml.cs to be a new TabbedLayoutPage so we could go straight to the page we were working on while debugging. I want to change it back to the MainPage but allow us to navigate via a button click to the tabbed layout page. For the most part, and by that, I mean somewhere north of 99%, mobile apps implement a modal or single document type interface. By that, I mean an app display's only one window or page at a time. There are ways around this restriction, as we've seen with the tabbed page. The flip side of this behavior makes for a relatively simple stack-based navigation model. If you are unfamiliar with stacks, they are a last in first out queue, abbreviated to LIFO. When you go from one page to another, you push the page onto the navigation stack. The default navigation return behavior is to go back to the previous page by popping the current page off the top of the stack.

Implementing basic navigation within a Xamarin forms app is simple. The navigation page class managers pushing and popping pages off the navigation stack. We can instantiate a new navigation page for the basic default navigation functionality and pass the MainPage, or whichever page we want to start with as the parameter to the navigation page constructor. Next, I'll add some buttons to the MainPage that we can use to navigate to other pages in the app. Keeping with the current theme, I'll place a stack layout within a boarded frame on the MainPage. Let's put two dark blue buttons inside the stack layout with a clicked attribute. Specifying a clicked action creates a private function within the C# code behind file. Inside the LayoutsButton clicked function, we have to use the PushAsync navigation method to add our destination page, in this case, the tabbed layout page, to the navigation stack. Because this is an asynchronous method, we need to use the await keyword and also mark the LayoutsButton clicked function as async. Let's run that. All we have to do is tell Xamarin which page we want to go to, and because of the stack navigation architecture of Mobile apps, the Xamarin framework has placed a back arrow at the top of each page so we can navigate back to the starting point. This navigation also works with Android's default back button. 

There is a sister method to PushAsync called PushModalAsync. PushModalAsync behaves the same as PushAsync, except you don't get the return arrow button at the top of the page. The idea behind modal is that the user has to complete some action on the page, and on the completion of that action, you write some code to modally pop the page off the navigation stack to return to the parent page. I'll copy the Controls button from the main page, paste it into the bottom of the StackLayout view, change the name and text, and add a clicked event. In the StackLayout code-behind file, it's just a case of asynchronously adding the navigation class method PopModalAsync. Let's save and run.

 

When we click the layouts button, the tabbed page opens with a slightly different animation, and we don't have the return arrow at the top left of the page. I'll quickly put a margin around the return button. Clicking the pop off stack button does exactly that, returning us from whence we came. The device's back button can bypass the app's modal behavior.