Exercise - Move between pages by using stack navigation
Note
.NET MAUI is the next evolution of Xamarin and what we recommend you develop mobile and desktop apps with, and you can learn more about .NET MAUI in several training modules. This Xamarin training module will not be maintained going forward.
You'll be working on the planetarium Astronomy app. There's some starter code to get you going. Your job is to add stack navigation by using a NavigationPage
to let the user take a linear path through several pages, and then back again.
Open the starter solution
Clone or download the exercise repo from GitHub.
Note
If you are planning to run and debug your Xamarin apps on Android from Windows, it is best to clone or download the exercise content to a short folder path, such as C:\dev\, to avoid build-generated files exceeding the maximum path length.
Open the starter solution from the exercise1 > start folder by using Visual Studio.
Add a NavigationPage
We'll use a NavigationPage
to add stack navigation to the starter Astronomy app. The NavigationPage
will be the first page your app displays.
- Open App.xaml.cs.
- Find the
App
constructor, and change theMainPage
to a new instance ofNavigationPage
. - Pass in an instance of
Astronomy.MainPage
to theNavigationPage
constructor.
public App ()
{
InitializeComponent();
MainPage = new NavigationPage(new Astronomy.MainPage());
}
Add the navigation UI
- Open MainPage.xaml.
- Add a new
Button
in theStackLayout
, below theLabel
. - Name the button
btnSunrise
. - Set the button text to Sunrise and Sunset.
- Add three more buttons:
- Name:
btnMoonPhase
, Text: Moon Phase - Name:
btnSpaceInfo
, Text: Astronomical Bodies - Name:
btnAbout
, Text: About Contoso Astronomy
- Name:
<ContentPage ...>
<StackLayout>
...
<Button x:Name="btnSunrise" Text="Sunrise and Sunset" />
<Button x:Name="btnMoonPhase" Text="Moon Phase" />
<Button x:Name="btnSpaceInfo" Text="Astronomical Bodies" />
<Button x:Name="btnAbout" Text="About Contoso Astronomy" />
</StackLayout>
</ContentPage>
Move to the selected page
You'll respond to your new buttons' Clicked
events, and move to the appropriate page.
- Open MainPage.xaml.cs.
- Add the button
Clicked
event handlers in the page constructor for the four buttons you created in the previous step.- For
btnSunrise
, assign aNavigation.PushAsync
call with a newSunrisePage
. - For
btnMoonPhase
, assign aNavigation.PushAsync
call with a newMoonPhasePage
. - For
btnSpaceInfo
, assign aNavigation.PushAsync
call with a newAstronomicalBodiesPage
. - For
btnAbout
, assign aNavigation.PushAsync
call with a newAboutPage
.
- For
- Optionally, inspect AstronomicalBodies. Notice that it also uses stack navigation to let you move one level deeper in the content hierarchy.
- Run the application and move forward and backward through the application content.
public MainPage()
{
InitializeComponent();
btnSunrise.Clicked += (s, e) => Navigation.PushAsync(new SunrisePage());
btnMoonPhase.Clicked += (s, e) => Navigation.PushAsync(new MoonPhasePage());
btnSpaceInfo.Clicked += (s, e) => Navigation.PushAsync(new AstronomicalBodiesPage());
btnAbout.Clicked += (s, e) => Navigation.PushAsync(new AboutPage());
}
You now have the app set up for stack navigation. You push new pages onto the stack with button click handlers, and allow the user to return to previous pages by using system-specific, back-navigation buttons or gestures.