【Xamarin.Forms 3】頁面類型

系列目錄

微信

一、【Xamarin.Forms 1】App的建立與運行

二、【Xamarin.Forms 2】App基礎知識與App啓動

知乎

一、【Xamarin.Forms 1】App的建立與運行

二、【Xamarin.Forms 2】App基礎知識與App啓動

博客園

一、【Xamarin.Forms 1】App的建立與運行

二、【Xamarin.Forms 2】App基礎知識與App啓動

CSDN

一、【Xamarin.Forms 1】App的建立與運行

二、【Xamarin.Forms 2】App基礎知識與App啓動

項目地址

一、GitHub：https://github.com/mzy666888/HelloXamarinFormsApp

二、Gitee：https://gitee.com/sesametechgroup/HelloXamarinFormsApp

引言

本篇文章將介紹Xamarin.Forms中 App 各類頁面類型。

開發環境

1. Visual Studio 2019 16.6.2
2. Xamarin.Forms 4.6.0.726
3. Android 5.0 (API 級別21 - Lollipop)以上

正文

下面描述的全部頁面類型都派生自Xamarin.Forms Page類。這些視覺對象佔據所有或者大部分屏幕。Page對象表示ViewController在iOS和Page通用Windows平臺中。在Android上，每一個頁面都佔據屏幕Activity，但Xamarin.Forms頁面並非Activity對象。

Xamarin.Forms在開發中，使用到的各類頁面類型主要包括：ContentPage，MasterDetailPage，NavigationPage，TabbedPage，CarouselPage，TemplatedPage。這些頁面在不一樣的使用場景中有不一樣的需求。

1、ContentPage頁面

ContentPage是最簡單且最多見的頁面類型。將Content屬性設置爲一個View對象，該對象最常設置爲Layout系列類型，如StackLayout，Grid或者ScrollView。

2、MasterDetailPage頁面

MasterDetailPage是管理兩個信息窗體的頁面類型。將Master屬性設置爲一般顯示列表或菜單的頁面。將Detail屬性設置爲顯示母版頁中選定項的頁面。IsPresented屬性控制主頁面或詳細信息頁面是否可見。

咱們在項目中添加一個MasterDetailPage頁面，自動會添加三個頁面：MasterDetailPage1.xaml，MasterDetailPage1Detail.xaml``MasterDetailPage1Master.xaml和一個類：MasterDetailPage1MasterMenuItem.cs。
其中MasterDetailPage1Detail.xaml(顯示內容頁面)，MasterDetailPage1Master.xaml(顯示菜單頁面)爲ContentPage類型的頁面。

在真機上運行效果以下圖（此圖爲兩張圖的合併後的圖像，注意根據頂部內容進行區分）

3、NavigationPage頁面

NavigationPage使用
NavigationPage使用基於堆棧的體系結構管理其餘頁面中的導航。在應用程序中使用頁面導航時，主頁的實例應傳遞給對象的構造函數NavigationPage。

4、TabbedPage頁面

TabbedPage派生自抽象MultiPage類，容許使用選項卡在子頁面間導航。將Children屬性設置爲頁的集合，或將屬性設置ItemsSource爲數據對象的集合，並將屬性設置爲ItemTemplate DataTemplate描述如何以可視方式標識每一個對象的屬性。

咱們在項目中添加一個TabbedPage頁面，系統默認生成的佈局代碼以下:

在真機上運行效果以下圖：

5、CarouselPage頁面

CarouselPage一樣派生自抽象MultiPage類，容許經過手指輕掃在子頁面之間導航。將Children屬性設置爲對象的集合ContentPage，或將屬性設置ItemsSource爲數據對象的集合，並將ItemTemplate屬性設置爲DataTemplate描述如何以直觀方式表示每一個對象的屬性。

6、TemplatedPage頁面

TemplatedPage使用控件模板顯示全屏內容，時基於類ContentPage。

可在添加->新建項中，選擇Xamarin.Forms選擇中看到部分能夠添加的頁面，對於沒有出現的頁面類型，能夠添加一個ContentPage後進行修改爲想要使用的類型。

加羣討論

參考文章：