【Xamarin.Forms 3】頁面類型

系列目錄

微信

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

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

知乎

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

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

博客園

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

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

CSDN

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

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

項目地址

1、GitHub://github.com/mzy666888/HelloXamarinFormsApp

2、Gitee://gitee.com/sesametechgroup/HelloXamarinFormsApp

引言

本篇文章將介紹Xamarin.FormsApp 各種頁面類型。

開發環境

  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對象表示ViewControlleriOSPage通用Windows平台中。在Android上,每個頁面都佔據屏幕Activity,但Xamarin.Forms頁面並不是Activity對象。

Xamarin.Forms在開發中,使用到的各種頁面類型主要包括:ContentPageMasterDetailPageNavigationPageTabbedPageCarouselPageTemplatedPage。這些頁面在不同的使用場景中有不同的需求。

一、ContentPage頁面

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

二、MasterDetailPage頁面

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

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

在真機上運行效果如下圖(此圖為兩張圖的合併後的圖像,注意根據頂部內容進行區分)

三、NavigationPage頁面

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

四、TabbedPage頁面

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

我們在項目中添加一個TabbedPage頁面,系統默認生成的布局代碼如下:

在真機上運行效果如下圖:

五、CarouselPage頁面

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

六、TemplatedPage頁面

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

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

加群討論

參考文章: