Xamarin 學習筆記 - Page（頁面）

葡萄城技術團隊發表於2018-08-02
筆記

 

本文翻譯自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://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。”
    • 沒有任何特定功能的最簡單頁面，用於開始一個空白頁面的模板。

頁面

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類。

當我們需要從一個頁面導航到另一個頁面時，我們可以有一組函式可以呼叫。

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

Navigation.PushAsync(new AboutPage())

或者該方法的非同步版本：

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。

邀請你在如下連結瞭解更多相關資訊：

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

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

更多細節：

我們通過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>

在我們的示例中，後面的程式碼將是這樣的：

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表示點選後應隱藏或不顯示主-從選單。

原始碼檔案

總結：

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

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

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

相關文章