- Hands-On Mobile Development with .NET Core
- Can Bilgin
- 198字
- 2021-06-24 13:55:37
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):
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: