For structuring rather complex apps it is a common pattern to provide a slide-out menu. It is always accessible, even if the user navigates deep into the page hierarchy. So it allows to quickly switch between different parts of the app.
Xamarin.Forms provides a handy class for building such slide-out pages: We assign a new MasterDetailPageto the MainPage. Its first part, the Master page, becomes our custom MenuPage. Secondly, the Detailpage, is a new NavigationPage containing a LinkPage, which we’ll define below. In order to be able to access this fundamental object, we assign it to a public static member variable.
public class App: Application
{
public static MasterDetailPage MasterDetailPage;
public App()
{
MasterDetailPage = new MasterDetailPage {
Master = new MenuPage(),
Detail = new NavigationPage(new LinkPage("A")),
};
MainPage = MasterDetailPage;
}
}
The MenuPage contains three MainLinks, that will open page “A”, “B” or “C”. Note that – even if not displayed – the master page needs a page title, which is “Master” in our case. For better visibility use a grayish BackgroundColor. And if we want to see an icon in the top left corner indicating the “back-to-menu” button on iOS, we need to assign an Icon and add it to the iOS “Resources” folder. Otherwise we would see a link with the master page title “Master”.
public class MenuPage: ContentPage
{
public MenuPage()
{
Content = new StackLayout {
Padding = new Thickness(0, Device.OnPlatform<int>(20, 0, 0), 0, 0),
Children = {
new MainLink("Page A"),
new MainLink("Page B"),
new MainLink("Page C"),
}
};
Title = "Master";
BackgroundColor = Color.Gray.WithLuminosity(0.9);
Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null;
}
}
To open the menu the user can either tap the “Back-to-menu” button or swipe from left to right.
So how do we open a new page from the menu? The MainLink button simply assigns a new NavigationPageto the Detail page. In order to hide the menu after tapping a MainLink, the IsPresented property is set to false.
public class MainLink: Button
{
public MainLink(string name)
{
Text = name;
Command = new Command(o => {
App.MasterDetailPage.Detail = new NavigationPage(new LinkPage(name));
App.MasterDetailPage.IsPresented = false;
});
}
}
The custom LinkPage shows three SubLink buttons. Each button is labeled with the name of the current page with an individual suffix.
public class LinkPage: ContentPage
{
public LinkPage(string name)
{
Title = name;
Content = new StackLayout {
Children = {
new SubLink(name + ".1"),
new SubLink(name + ".2"),
new SubLink(name + ".3"),
},
};
}
}
In contrast to a MainLink, the SubLink does not replace the detail page, but pushes a new LinkPage on the navigation stack.
public class SubLink: Button
{
public SubLink(string name)
{
Text = name;
Command = new Command(o => App.MasterDetailPage.Detail.Navigation.PushAsync(new LinkPage(name)));
}
}
As soon as there is more than one LinkPage on the navigation stack, a “Back” button will appear in the top left corner allowing to close the current page.