Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Types of Pages
Besides displaying a ContentPage within a page, in Xamarin.Forms a Page can also contain one of the following:
- MasterDetailPage class
- NavigationPage class
- TabbedPage class
- CarouselPage class
The following sections take a more detailed look at the different types of pages you can create in Xamarin.
MasterDetailPage Class
Let's take a look at how the MasterDetailPage class works. The MasterDetailPage displays two pages—one master and one detail. When MasterDetailPage is loaded, the detail page is shown. You can slide the detail page to the right to reveal the master page. The master page is usually used to display menus or a list of items. When an item is selected, detailed information about the selected item is displayed in the detail page.
To use the MasterDetailPage class, add the statements shown in bold in the following code to the App.cs file in the HelloWorld project:
using System;
using Xamarin.Forms;
namespace HelloWorld
{
public class App
{
public static Page GetMainPage ()
{
/*
return new ContentPage {
Content = new Label {
Text = “Hello, Forms!”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
*/
return new MasterDetailPageDemo ();
}
}
public class MasterDetailPageDemo : MasterDetailPage {
public MasterDetailPageDemo() {
this.Master = MasterPage ();
this.Master.BackgroundColor = Color.Yellow;
this.Detail = DetailPage ();
this.Detail.BackgroundColor = Color.Lime;
}
public Page MasterPage ()
{
return new ContentPage {
Content = new Label {
Text = “Master Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
public Page DetailPage ()
{
return new ContentPage {
Content = new Label {
Text = “Detail Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
}
}
In this example, the MasterDetailPageDemo class extends the MasterDetailPage base class. The class has two methods—MasterPage() and DetailPage()—each of which returns a ContentPage object. You set the master page by assigning a ContentPage object to the Master property of the MasterDetailPageDemo class; likewise, you set the detail page by assigning a ContentPage object to the Detail property. Finally, in the GetMainPage() method, instead of returning a ContentPage object, you return a MasterDetailPage object.
Figure 8 shows how the application looks in the iPhone Simulator. You can slide the detail page to the right to reveal the master page.
)
Figure 8 The MasterDetailPage running on the iPhone Simulator.
Figure 9 shows the same application, which looks similar when it's run on the Android emulator.
)
Figure 9 The MasterDetailPage running on the Android emulator.
TabbedPage Class
The TabbedPage class allows two or more pages to be represented in an array of tabs shown either on the bottom of the screen (iOS) or at the top of the screen (Android).
For this example, add four images to the Resources folder of the HelloWorld.iOS project, as shown in Figure 10.
){kind=link}
Figure 10 Adding four images to the Resources folder of the iOS project.
Right-click the four images and select Build Action > BundleResource (see Figure 11).
)
Figure 11 Setting the build action for the four images.
For the HelloWorld.Android project, add the two images shown in Figure 12 to the Resources/drawable folder.
){kind=link}
Figure 12 Adding two images to the Resources/drawable folder of the Android project.
Right-click the two images and select Build Action > AndroidResource (see Figure 13).
)
Figure 13 Setting the build action for the two images.
To use the TabbedPage class, add the statements shown in bold in the following code to the App.cs file in the HelloWorld project:
using System;
using Xamarin.Forms;
namespace HelloWorld
{
public class App
{
public static Page GetMainPage ()
{
/*
return new ContentPage {
Content = new Label {
Text = “Hello, Forms!“,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
*/
//return new MasterDetailPageDemo ();
return new TabbedPageDemo ();
}
}
public class TabbedPageDemo: TabbedPage {
public TabbedPageDemo() {
var page1 = FirstPage ();
page1.Title = “Page 1”;
page1.Icon = “tags.png”;
var page2 = SecondPage ();
page2.Title = “Page 2”;
page2.Icon = “target.png”;
this.Children.Add (page1);
this.Children.Add (page2);
}
public Page FirstPage ()
{
return new ContentPage {
Content = new Label {
Text = “First Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
public Page SecondPage ()
{
return new ContentPage {
Content = new Label {
Text = “Second Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
}
public class MasterDetailPageDemo : MasterDetailPage {
...
}
}
In the above example, the TabbedPageDemo class extends the TabbedPage base class. It has two methods—FirstPage() and SecondPage()—each of which returns a ContentPage object. To set the various pages, you use the Add() method to add ContentPage objects. You can also assign a tab title and icons for each individual page. Finally, in the GetMainPage() method, instead of returning a ContentPage object, you return a TabbedPage object.
Figure 14 shows how the application will look in the iPhone Simulator.
)
Figure 14 The TabbedPage running on the iPhone Simulator.
Figure 15 shows how the application will look in the Android emulator. At the time of writing, Xamarin.Forms does not support icons in TabbedPage.
)
Figure 15 The TabbedPage running on the Android Emulator.
CarouselPage Class
A CarouselPage class allows pages to be displayed using swipe gestures. It is especially useful if you have a series of information items (such as images) to display in each page.
To use the CarouselPage class, add the statements shown in bold in the following code to the App.cs file in the HelloWorld project:
using System;
using Xamarin.Forms;
namespace HelloWorld
{
public class App
{
public static Page GetMainPage ()
{
/*
return new ContentPage {
Content = new Label {
Text = “Hello, Forms!”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
*/
//return new MasterDetailPageDemo ();
//return new TabbedPageDemo ();
return new CarouselPageDemo ();
}
}
public class CarouselPageDemo: CarouselPage {
public CarouselPageDemo() {
var page1 = FirstPage ();
var page2 = SecondPage ();
this.Children.Add (page1);
this.Children.Add (page2);
}
public ContentPage FirstPage ()
{
return new ContentPage {
Content = new Label {
Text = “First Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
public ContentPage SecondPage ()
{
return new ContentPage {
Content = new Label {
Text = “Second Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
}
public class TabbedPageDemo: TabbedPage {
...
}
public class MasterDetailPageDemo : MasterDetailPage {
...
}
}
In the above example, the CarouselPageDemo class extends the CarouselPage base class. It has two methods—FirstPage() and SecondPage()—each of which returns a ContentPage object. To set the various pages, you use the Add() method to add ContentPage objects. Finally, in the GetMainPage() method, instead of returning a ContentPage object, you return a CarouselPage object.
Figure 16 shows how the application will look in the iPhone Simulator. You can swipe the page to reveal the second page.
)
Figure 16 The CarouselPage running on the iPhone Simulator.
Figure 17 shows how the application will look in the Android emulator.
)
Figure 17 The CarouselPage running on the Android Emulator.
NavigationPage Class
A NavigationPage class allows pages to be stacked on top of one another using the Last-In-First-Out sequence.
To use the NavigationPage class, add the statements shown in bold in the following code to the App.cs file in the HelloWorld project:
using System;
using Xamarin.Forms;
namespace HelloWorld
{
public class App
{
public static Page GetMainPage ()
{
/*
return new ContentPage {
Content = new Label {
Text = “Hello, Forms!”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
*/
//return new MasterDetailPageDemo ();
//return new TabbedPageDemo ();
//return new CarouselPageDemo ();
var rootPage = new NavigationPageDemo();
rootPage.Title = “Main Page”;
var navPage = new NavigationPage (rootPage);
return navPage;
}
}
public class NavigationPageDemo: ContentPage {
public NavigationPageDemo ()
{
Button btn = new Button {
Text = “Next Page”,
HorizontalOptions = LayoutOptions.Center
};
btn.Clicked += async (sender, args) => {
var secondPage = new NavigationPageDemo().SecondPage();
await this.Navigation.PushAsync (secondPage);
};
Label label = new Label {
Text = “Root Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
Content = new StackLayout {
Children = {
label,
btn
}
};
}
public Page SecondPage ()
{
return new ContentPage {
Content = new Label {
Text = “Second Page”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
}
public class CarouselPageDemo: CarouselPage {
...
}
public class TabbedPageDemo: TabbedPage {
...
}
public class MasterDetailPageDemo : MasterDetailPage {
...
}
}
In the above example, the NavigationPageDemo class extends the ContentPage base class. It has one method—SecondPage()—that returns a ContentPage object. In the constructor for the NavigationPageDemo class, you add a button and a label to the page, and then create a Clicked event handler for the button. When the button is clicked, you navigate to the second page by using the PushAsync() method of the Navigation object.
Then, in the GetMainPage() method, you create a NavigationPageDemo object, set its title, and then set it as the root page by passing it as the argument to the NavigationPage constructor. Finally, you return the NavigationPage object.
Figure 18 shows how the application will look in the iPhone Simulator. Clicking the Next Page button at the bottom of the page will navigate to the second page. To go back to the first page, click the Main Page button located at the top of the page.
)
Figure 18 The NavigationPage running on the iPhone Simulator.
Figure 19 shows how the application will look in the Android emulator.
)
Figure 19 The NavigationPage running on the Android emulator.