Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Building User Interfaces: MasterDetail and Navigation Pages
2
Building User Interfaces
MasterDetail and Navigation Pages
MasterDetailPage
Manages two separate panes, which includes a flyout control.
Characteristics
- The MasterDetailPage is a very important page, since it allows you to split contents into two separate categories: generic and detailed.
- It offers a flyout on the left (the master part) that you can swipe to show and hide it.
- A second area on the right that displays more detailed content (the detail part).
- Both the master and the detail parts are represented by ContentPage objects.
- The user interface provided by the MasterDetailPage is very common in Android and iOS apps.
Code
- A MasterDetailPage is designed to be a root page, and using it as a child page in other page types could result in unexpected and inconsistent behavior.
- it's recommended that the master page of a MasterDetailPage should always be a ContentPage instance.
- The detail page should only be populated with TabbedPage, NavigationPage, and ContentPage instances.
Root
Root
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage" >
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
https://github.com/jjcaicedob/Xamarin/blob/master/AppNavigation/AppNavigation/AppNavigation/TestMasterDetailPage.xaml
Master
Master
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="using:MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MasterPage"
Padding="0,40,0,0"
Icon="hamburger.png"
Title="Personal Organiser" >
<StackLayout>
<ListView x:Name="listView">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local:MasterPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
<local:MasterPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
<local:MasterPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout>
</ContentPage >
https://github.com/jjcaicedob/Xamarin/blob/master/AppNavigation/AppNavigation/AppNavigation/TestMasterDetailPageMaster.xaml
Detail
Detail
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppNavigation.TestMasterDetailPageDetail"
Title="Contact Page">
<StackLayout Padding="10">
<Label Text="This is a detail page."/>
</StackLayout>
</ContentPage >
https://github.com/jjcaicedob/Xamarin/blob/master/AppNavigation/AppNavigation/AppNavigation/TestMasterDetailPageDetail.xaml
Display
The MasterDetailPage is a page that manages two related pages of information:
- A master page that presents items, and
- A detail page that presents details about items on the master page.
Master
- The location of the list of items is identical on each platform.
- Selecting one of the items will navigate to the corresponding detail page.
- In addition, the master page also features a navigation bar that contains a button that can be used to navigate to the active detail page.
Detail
The behavior of the navigation experience between master and detail pages is platform dependent:
- On iOS, the detail page slides to the right as the master page slides from the left, and the left part of the detail page is still visible.
- On Android, the detail and master pages are overlayed on each other.
- On UWP, the detail and master pages are swapped.
NavigationPage
Provides the infrastructure for navigating among pages.
Characteristics
- The NavigationPage class provides a hierarchical navigation experience where the user is able to navigate through pages, forwards and backwards, as desired.
- The class implements navigation as a last-in, first-out (LIFO) stack of Page objects.
Overview
Overview
To move from one page to another, an application will push a new page onto the navigation stack, where it will become the active page, as shown in the following diagram:
To return back to the previous page, the application will pop the current page from the navigation stack, and the new topmost page becomes the active page, as shown in the following diagram:
Performing Navigation
Performing Navigation
The following screenshots show the main components of the NavigationPage on each platform:
The layout of a NavigationPage is dependent on the platform:
- Navigation bar: Position?
- Title: Alignament?
- Icon: Present?
- Back button?
Creating the Root Page
The first page added to a navigation stack is referred to as the root page of the application, and the following code example shows how this is accomplished:
The RootPage property of a NavigationPage instance provides access to the first page in the navigation stack.
public App ()
{
MainPage = new NavigationPage (new Page1Xaml ());
}
Pushing Pages to the Navigation Stack
To navigate to Page2Xaml, it is necessary to invoke the PushAsync method on the Navigation property of the current page, as demonstrated in the following code example:
When the PushAsync method is invoked, the following events occur:
- The page calling PushAsync has its OnDisappearing override invoked.
- The page being navigated to has its OnAppearing override invoked.
- The PushAsync task completes.
async void OnNextPageButtonClicked (object sender, EventArgs e)
{
await Navigation.PushAsync (new Page2Xaml ());
}
Popping Pages from the Navigation Stack
The active page can be popped from the navigation stack by pressing the Back button on the device, regardless of whether this is a physical button on the device or an on-screen button.
When the PopAsync method is invoked, the following events occur:
- The page calling PopAsync has its OnDisappearing override invoked.
- The page being returned to has its OnAppearing override invoked.
- The PushAsync task completes.
async void OnPreviousPageButtonClicked (object sender, EventArgs e)
{
await Navigation.PopAsync ();
}