Xamarin 學習筆記 - Page（頁面）

本文翻譯自CodeProject文章：https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages

轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

引言

在之前的章節，我講解了如何為Android或者iOS應用程序開發準備環境以及Layout布局的一些基本概念。

在本章中，我將開始在Xamarin.Forms中展示我們頁面的結構。

Xamarin.Forms基于Page頁面的概念，我們可以使用XAML創建一個應用程序來設計我們的頁面以及后臺的C#代碼。

我們有五種不同的頁面類型：ContentPage、NavigationPage、TabbedPage、CarouselPage以及MasterDetailPage。

在Visual Studio 2017中創建一個新工程，我們選擇File/New/project。

之后會彈出一個窗口以供我們選擇Visual C#/Cross-Platform，此處.NET Framework默認將會是最新版本，在我這里Framework的版本號是4.6.2

接下來一個窗口將顯示出來用做選擇是一個空白工程還是一個Master-Detail模式的工程（它集成了MVVM模式的應用）。

該模板允許你選擇想要的內容，包括你想要基于的平臺，以及具體的代碼共享策略。

在過去，我們看到的界面長這個樣子：

但是在最近更新的版本Visual Studio 2015 15.5.2中，我們將看不到在“代碼共享策略”一欄有PCL（可移植類庫）的選項，它被.NET Standard所取代。

讓我們來理解與之相關的一些概念。

PCL或者說可移植類庫是一組類庫，該類庫以一組具有相同API的平臺為目標的類庫。更多詳細信息，請參見此鏈接。

.NET Standard：它是一組“標準”API而不是一個平臺。這里我們將不談論任何平臺，它僅僅是一個標準（當前版本2.0），你的代碼可以在支持它的所有平臺上運行。在2017年11月，.NET Standard進入了Xamarin.Forms的項目模板。

因此將支持的目標從PCL轉向.NET Standard，所帶來的不同僅僅是命名空間的指向被標準化為另外一種不同的方式。

.NET Standard 2.0的新版本致力于通過各種平臺共享代碼，現在Xamarin.Forms通過跨平臺應用程序向導引入它，它將默認使用PackageReference。我們來看看新窗口的樣子：

以下是Github上關于.NET Standard的更多信息：

• https://github.com/dotnet/standard

這是另外一篇很不錯的文章，解釋相關話題：

• https://blog.xamarin.com/building-xamarin-forms-apps-net-standard/

• UI結構

• 你所看到的第一頁面就是這一個，那么什么是頁面（Page）？它可以包含什么？

• 頁面是一個主容器，在我們的示例中，它是一個ContentPage類型的頁面。

• 在該Page頁面中，我們將添加一個Layout布局，在本示例中我們用的是StackLayout，在該StackLayout中間，我們將添加一些view視圖。這些視圖是一組控件，在本示例中，我們用到的是：一個Label標簽，一個Entry（輸入文本）以及一個Button按鈕。

• Xamarin.Forms提供了許多可用的頁面，以允許提出各種不同的導航體驗。為了精確的定義什么是一個Xamarin.Forms.Page的示例，官方的文檔給出了一個清晰而簡明的定義。

• 和這個鏈接中提到的那樣：

• “頁面是占據屏幕大部分或全部并包含單個子的視覺元素。一個頁面代表Windows中的一個視圖控制器，一個Windows中的一個頁面，就像Android上的一個Activity，但不是一個活動的Activity?！?/p>

• 沒有任何特定功能的最簡單頁面，用于開始一個空白頁面的模板。

頁面

1. ContentPage

<!--這是 XAML 部分--><? xml version = "1.0" encoding = "utf-8"?><ContentPage xmlns = "http://xamarin.com/schemas/2014/forms" 
       xmlns: x = "http://schemas.microsoft.com/winfx/2009/xaml" 
       x: Class = "Sample.MyContentPage" 
       Title = "ContentPage Presentation" Padding = "10">   <StackLayout><Label Text = "Welcome to Xamarin.Forms !" /></StackLayout></ContentPage>

ContentPage繼承自TemplatedPage，這是Xamarin.Forms.dll中的基類：

要添加新的ContentPage，我們選擇：New Item/ContentPage.xaml。

NavigationPage

它是一種可以容納多個頁面的頁面，但只顯示一個頁面，并提供在它們之間進行導航的功能。

在我們的示例中，我們實例化了一個新的NavigationPage對象，在其構造器中，我們指定了其顯示的第一個頁面。

NavigationPage繼承自Page類。

當我們需要從一個頁面導航到另一個頁面時，我們可以有一組函數可以調用。

如果我們希望在一個按鈕動作事件中跳轉到另一個頁面，我們使用以下代碼：

1

Navigation.PushAsync(new AboutPage())

或者該方法的異步版本：

1

Navigation.PushModalAsync(new AboutPage());

我們可以通過使用以下方法返回到前一個頁面：Navigation.PopAsync();或者Navigation.PopModalAsync();

其它可以使用的方法如下：

Navigation.PopToRootAsync();從導航堆棧中彈出所有堆棧的頁面，除了根Xamarin.Forms.Page頁面。

我們可以在XAML部分使用導航功能，如下所示：

<!--這是XAML部分--> 
<NavigationPage Title="Schedule" Icon="schedule.png"> 
        <x:Arguments> 
            <local:MyPage1 /> 
        </x:Arguments> 
</NavigationPage>

在此示例中，我們創建一個Page，設置其標題為Schedule，并指定一個“schedule.png”的圖標，我們頁面的內容在內部的MyPage1中，那是一個ContentView，而不是一個ContentPage。

邀請你在如下鏈接了解更多相關信息：

• https://developer.xamarin.com/api/type/Xamarin.Forms.NavigationPage/

TabbedPage

如同該類型的名稱一樣，它類似于Web或Pivot控件中的Tab，允許顯示包含多個選項卡的頁面。

我們通過C#代碼創建了一個TabbedPage：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:mypages="clr-namespace:MyApp.Pages;assembly=MyApp"  

            x:Class="MyApp.Pages.Navigation"> 
<TabbedPage.Children> 
   <mypages:Page1 Title="Page 1"/>
   <mypages:Page2 Title="Page 2"/>
   <mypages:Page3 Title="Page 3"/> 
</TabbedPage.Children>  
</TabbedPage>

CarouselPage

該頁面使用滑動手勢在頁面之間導航。

更多細節：

• https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/carousel-page/

我們通過C#代碼創建了一個CarouselPage：

public partial class App : Application

{

public App ()

{

InitializeComponent();

MainPage = new MasterProject.Views.MasterPage();

CarouselPage carouselPage = new CarouselPage();

carouselPage.Children.Add(new MainPage());

carouselPage.Children.Add(new Page1());

carouselPage.Children.Add(new Page2());

MainPage = carouselPage;

}

　同樣我們也可以使用以下代碼通過XAML添加一個CarouselPage：　

<?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="clr-namespace:NogginXamarinFormSample;assembly=CarouselPage"

     x:Class="CarouselPage.Sample"> 
    <CarouselPage.Children> 
        <local:MyPage1 /> 
        <local:MyPage2 /> 
        <local:MyPage3 /> 
    </CarouselPage.Children> 
</CarouselPage>

在我們的示例中，后面的代碼將是這樣的：

1

2

public partial class CarouselPage : CarouselPage {

}

MasterDetailPage

“Xamarin.Forms MasterDetailPage是一個管理兩個相關信息頁面的頁面 - 一個顯示項目的主記錄頁面，以及一個顯示主記錄頁面上單個項目詳細信息的詳細信息頁面。本文介紹如何使用MasterDetailPage和在其信息頁面之間導航?！备嘣敿毿畔?，請查看此鏈接。

因此，Master Detail Page容器擁有兩個頁面，一個是主記錄頁面，另一個是詳細信息頁面。主記錄頁面將包含菜單列表，詳細信息頁面將顯示詳細信息并將鏈接返回主記錄頁面，想法很簡單，如果你有任何按鈕或選項在菜單中顯示它但你想在一開始隱藏它們，以保持良好的UI體驗。

我們將使用以下XAML代碼對其進行定義：

<MasterDetailPage.Master >
       <ContentPage Padding="10" BackgroundColor="Gray"
       Title="Master" Icon="hamburger.png">
           <ContentPage.Content>
               <StackLayout Margin="5,30,5,5">
                   <Label Text="Master Page">
                   </Label>
                   <Button x:Name="goToPage1"
                   Text="Go to Page 1" BackgroundColor="Yellow"
                    Clicked="goToPage1_Clicked"></Button>
                   <Button x:Name="goToPage2"
                   Text="Go to Page 2" BackgroundColor="Red"
                    Clicked="goToPage2_Clicked"></Button>
                   <Button x:Name="goToPage3"
                   Text="Go to Page 3" BackgroundColor="Green"
                    Clicked="goToPage3_Clicked"></Button>
              </StackLayout>
          </ContentPage.Content>
       </ContentPage>
   </MasterDetailPage.Master>
<MasterDetailPage.Detail>
       <ContentPage Padding="10">
           <ContentPage.Content>
               <StackLayout Margin="5,30,5,5">
                   <Label Text="Detail  Page">
                   </Label>
               </StackLayout>
           </ContentPage.Content>
       </ContentPage>
   </MasterDetailPage.Detail>

在<MasterDetailPage.Master>標簽中，我們將定義主視圖，在我們的例子中，我們有三個Button按鈕用來鏈接我們的頁面。

在<MasterDetailPage.Detail>標記中，如果我們沒有在類的構造函數中定義它，我們將包含默認內容。

這些標簽對于Master-Detail 頁面是必需的。

我們將創建三個頁面：Page1，Page2并且Page3具有不同的內容和背景顏色。

現在，在C#部分中，我們將定義默認頁面，以便在啟動應用程序時顯示它。

public MasterPage (){ InitializeComponent ();

Detail = new NavigationPage(new Page1());

//Summary:

//Gets or sets a value that indicates whether or not the visual element

//that is represented by the Xamarin.Forms.MasterDetailPage.Master property

//is presented to the user.

//    Remarks:

//Setting this property causes the Xamarin.Forms.MasterDetailPage.IsPresentedChanged

//event to be raised.

//We initialize it to false

IsPresented = false;

}

void goToPage1_Clicked(object sender, System.EventArgs e)

{

//We will display the first page

Detail = new NavigationPage(new Page1());

IsPresented = false;

}

}

屬性IsPresented表示點擊后應隱藏或不顯示主-從菜單。

源代碼文件

• https://github.com/didourebai/MasterProject

• https://github.com/didourebai/Xamarin-Sample2

總結：

至此，我們的Xamarin基礎學習筆記就先告一段落，相信通過了如上的學習，大家也能夠對Xamarin感興趣，能夠使用和嘗試Xamarin。后面大家如果有其他想了解的Xamarin教程也可以PM我們，也歡迎為我們投稿。

Xamarin這個平臺總的來講是一個快速提高開發效率和降低開發成本的一個平臺，你可以不必特別了解多個開發平臺的語言和環境特性也能開發出多個移動應用，僅憑這一點，Xamarin也已經在移動開發領域擁有了一批擁躉。

而在這其中，葡萄城也是其中的一員，活字格 的用戶專屬App也是使用Xamarin進行開發的，這個App的主要功能是擴展了活字格應用在移動端的可用性，豐富了用戶使用的場景，例如：可以在應用中使用掃碼命令幫你快速錄入產品信息、使用移動設備定位、手機系統級通知等等功能。