Xamarin 學習筆記 - Page（頁面）

時間 2019-11-16

標籤 xamarin 學習筆記 page 頁面简体版

原文原文鏈接

本文翻譯自CodeProject文章：https://www.codeproject.com/A...前端

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

引言

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

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

Xamarin.Forms基於Page頁面的概念，咱們可使用XAML建立一個應用程序來設計咱們的頁面以及後臺的C#代碼。app

咱們有五種不一樣的頁面類型：ContentPage、NavigationPage、TabbedPage、CarouselPage以及MasterDetailPage。異步

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

以後會彈出一個窗口以供咱們選擇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/sta...
這是另一篇很不錯的文章，解釋相關話題：

https://blog.xamarin.com/buil...

UI結構
你所看到的第一頁面就是這一個，那麼什麼是頁面（Page）？它能夠包含什麼？
頁面是一個主容器，在咱們的示例中，它是一個ContentPage類型的頁面。
在該Page頁面中，咱們將添加一個Layout佈局，在本示例中咱們用的是StackLayout，在該-StackLayout中間，咱們將添加一些view視圖。這些視圖是一組控件，在本示例中，咱們用到的是：一個Label標籤，一個Entry（輸入文本）以及一個Button按鈕。
Xamarin.Forms提供了許多可用的頁面，以容許提出各類不一樣的導航體驗。爲了精確的定義什麼是一個Xamarin.Forms.Page的示例，官方的文檔給出了一個清晰而簡明的定義。
和這個連接中提到的那樣：
「頁面是佔據屏幕大部分或所有幷包含單個子的視覺元素。一個頁面表明Windows中的一個視圖控制器，一個Windows中的一個頁面，就像Android上的一個Activity，但不是一個活動的Activity。」
沒有任何特定功能的最簡單頁面，用於開始一個空白頁面的模板。

頁面

1.ContentPage

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

邀請你在以下連接瞭解更多相關信息：

https://developer.xamarin.com...

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...
咱們經過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表示點擊後應隱藏或不顯示主-從菜單。

源代碼文件
https://github.com/didourebai...
https://github.com/didourebai...

總結：

至此，咱們的Xamarin基礎學習筆記就先告一段落，相信經過了如上的學習，你們也可以對Xamarin感興趣，可以使用和嘗試Xamarin。後面你們若是有其餘想了解的Xamarin教程也能夠PM咱們，也歡迎爲咱們投稿。

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

而在這其中，葡萄城也是其中的一員，活字格的用戶專屬App也是使用Xamarin進行開發的，這個App的主要功能是擴展了活字格應用在移動端的可用性，豐富了用戶使用的場景，例如：能夠在應用中使用掃碼命令幫你快速錄入產品信息、使用移動設備定位、手機系統級通知等等功能。此外，ComponentOne .NET控件集也有對Xamarin良好的支持和擴展，其提供的.NET控件之多和輕量是市面上衆多.NET控件集沒法替代的。

本文是由葡萄城技術開發團隊發佈，轉載請註明出處：葡萄城官網

瞭解開放易用的 Web 生成平臺，請前往活字格Web應用生成平臺

瞭解可嵌入您系統的在線 Excel，請前往SpreadJS純前端表格控件