Multi-page views

CarouselPage and TabbedPage are two Xamarin.Forms page implementations that derive from the MultiPage abstraction. These pages can each host multiple pages with unique navigation between them.

To illustrate the usage of MultiPage implementations, we can utilize our previously implemented pages:

 <?xml version="1.0" encoding="UTF-8"?>
<CarouselPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="using:FirstXamarinFormsApplication.Client"
x:Class="FirstXamarinFormsApplication.Client.ItemsCarousel">
<CarouselPage.Children>
<local:ListItemView BindingContext="{Binding .}" Icon="Xamarin.png"/>
<local:ItemView BindingContext="{Binding Items[0]}" Title="First" Icon="Xamarin.png"/>
<local:ItemView BindingContext="{Binding Items[1]}" Title="Second" Icon="Xamarin.png"/>
<local:ItemView BindingContext="{Binding Items[2]}" Title="Third" Icon="Xamarin.png"/>

</CarouselPage.Children>
</CarouselPage>

In a similar fashion, we can create our tabbed page using the list and item details view pages:

 <?xml version="1.0" encoding="UTF-8"?>
<TabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="using:FirstXamarinFormsApplication.Client"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FirstXamarinFormsApplication.Client.ItemsTabbed">
<TabbedPage.Children>
<local:ListItemView BindingContext="{Binding .}" Icon="Xamarin.png"/>
<local:ItemView BindingContext="{Binding Items[0]}" Title="First" Icon="Xamarin.png"/>
<local:ItemView BindingContext="{Binding Items[1]}" Title="Second" Icon="Xamarin.png"/>
<local:ItemView BindingContext="{Binding Items[2]}" Title="Third" Icon="Xamarin.png"/>
</TabbedPage.Children>
</TabbedPage>

The resulting pages would, in fact, host all the children in their respective layout and navigation methods (tabs versus swipe gestures):

It is important to note that, on iOS, the title and icon properties of children are used to create tabbed navigation items. In order for icons to display properly, the image that is used should be 30x30 for normal resolution, 60x60 for high resolution, and 90x90 for iPhone 6 resolution. On Android, the title is used to create tab items.

In particular, TabbedPage is one of the fundamental controls used in iOS applications at the top of the navigation hierarchy. TabbedPage implementation can be extended by creating a navigation stack for each of the tabs separately. This way, navigating between tabs preserves the navigation stack for each tab independently, with support for navigating back and forth: