C#使用Xamarin開發可移植移動應用(1.入門與Xamarin.Forms頁面),附源碼

時間 2019-11-16

標籤 c# 使用 xamarin 開發可移植移動應用入門 xamarin.forms forms 頁面源碼欄目 C# 简体版

原文原文鏈接

原文: C#使用Xamarin開發可移植移動應用(1.入門與Xamarin.Forms頁面),附源碼

前言

什麼是Xamarin?

Xamarin始創於2011年，旨在使移動開發變得難以置信地迅捷和簡單。html

Xamarin的產品簡化了針對多種平臺的應用開發，包括iOS、Android、Windows Phone和Mac App。git

Xamarin由許多著名的開源社區開發者創立和參與，並且也是Mono項目的主導者——C#與·NET框架的開源、跨平臺實現。github

(以上摘自百度百科)框架

那麼什麼是Xamarin.Forms?

(意思就是可移植的UI)ide

本系列介紹了Xamarin.Forms開發的基礎知識，涵蓋了多平臺和多屏應用的構建。post

Xamarin.Forms是一個容許開發人員快速建立跨平臺UI界面的框架。學習

它爲iOS，Android，Windows或Windows Phone上的原生UI呈現給用戶的界面提供了本身的抽象。ui

這意味着你的應用程序能夠共享大部分用戶界面代碼.url

Xamarin.Forms容許快速建立應用程序，隨着時間的推移，應用程序能夠演變爲複雜的應用程序。spa

因爲Xamarin.Forms應用程序是原生應用程序，所以它沒有其餘的使用限制。

使用Xamarin.Forms編寫的應用程序可以利用原平生臺的任何API或功能.

例如（但不限於）iOS上的CoreMotion，PassKit和StoreKit; NFC和Android上的Google Play服務;

在Xamarin.Forms中建立UI界面有兩種技術。

第一種技術是用C＃源碼建立UI。

第二種技術是使用可擴展應用程序標記語言（XAML），這是一種用於描述用戶界面的聲明式標記語言。有關XAML的更多信息，請參閱XAML基礎知識。

爲何要學習Xamarin.Forms?

在移動應用發展迅速的今天,咱們的APP必需要兼容多個平臺,且APP的構建,主要仍是構建界面(業務邏輯通常放在服務去處理)

固然,WebApp能夠解決這個問題.

可是不排除咱們會須要用原生的APP,然而原生的APP開發,主流平臺就少不了iOS、Android、Windows10 Phone(..嗯..這個,算主流吧?好歹還活着 - -,)

每一個平臺咱們都須要構建一次咱們的界面,很繁瑣,且知識點太多,學習入門會很難.因此Xamarin.Forms應運而生,一次編寫,多平臺編譯.

今天的學習內容?

今天主要學習Xamarin.Forms中提供的各種頁面,如圖:

效果以下:

正文

1.建立跨平臺的可移植項目

首先咱們先新建一個項目,具體如圖:

第二步咱們選擇以下:

注意:這裏必定要選擇可移植的類庫(PCL),由於共享項目新建頁面的時候有點問題,因此不推薦

點擊OK,咱們就能夠獲得以下幾個程序集

咱們能夠看到,第一個是可移植的,這裏就是咱們要編寫代碼的地方,

下面2個,一個安卓,一個IOS,若是你使用調試安卓,就設置他爲啓動項.

若是你想調試IOS,那麼你就設置下面的爲啓動項.(須要Mac)

由於咱們編寫的是跨平臺的項目,因此,咱們通常不須要編寫下面2個程序集(固然,有些特殊狀況是須要的).

項目建立完成,咱們就能夠編寫咱們的代碼了.

1.ContentPage(內容頁)

進入咱們的項目咱們會發現已經幫咱們建立好了一些必須會使用到的頁面如圖:

每一個xaml下面都對應着一個cs文件,是否是和咱們的windowForm很類似呢~

App.xaml中的代碼,咱們先無論,他相似於windowForm中的Program.cs,是幫咱們啓動項目用的.

咱們先進入MainPage.xaml中,會發現他繼承了咱們本節要講的ContentPage.

因此,其實已經很明顯了,它就是最基礎的頁面,相似於安卓開發的Activity,

咱們所開發基礎界面,都須要繼承它.

它只是一個內容容器,並不具體的呈現任何東西,須要配合各種控件才能展示畫面.

咱們進入到xaml中,在<ContentPage>標籤下編寫代碼:

    <StackLayout>
        <Button Text="打開CarouselPage" Clicked="Button_Clicked"></Button>
        <Button Text="打開MasterDetailPage" Clicked="Button_Clicked_1"></Button>
        <Button Text="打開TabbedPageTest" Clicked="Button_Clicked_2"></Button>
    </StackLayout>

效果如圖:

2.CarouselPage(滑動頁)

這個頁面主要是滑動效果,他裏面能夠放置多個內容頁.

效果如圖:

xaml代碼以下:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DemoApp.CarouselPage.CarouselPageTest">
    <ContentPage>
        <StackLayout>
            <Label Text="Red" />
            <BoxView Color="Red" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        <StackLayout>
            <Label Text="Green" />
            <BoxView Color="Green" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        <StackLayout>
            <Label Text="Blue" />
            <BoxView Color="Blue" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage>
</CarouselPage>

解釋一下,上面的xaml代碼,咱們放置了3個內容頁,第一個爲紅色填充,第二個爲綠填充,第三個爲藍填充.

咱們在來看看後臺代碼:

 public partial class CarouselPageTest :Xamarin.Forms.CarouselPage
    {
        public CarouselPageTest()
        {
            
            InitializeComponent();
        }
    }

咱們只是繼承了一下Xamarin.Forms.CarouselPage,就很簡單的能夠實現一個多頁面的滑動

咱們回到MainPage,編寫Button_Clicked事件以下:

        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new CarouselPage.CarouselPageTest());
        }

這樣,就能跳轉到咱們的滑動頁了

3.MasterDetailPage(主次頁面)

手機QQ你們必定都用過,當你點擊頭像的時候,就會彈出部分次頁面,主頁面則會隱藏.

效果如圖:

這是一個頗有用的基礎頁面,咱們在不少APP中應該都見過.

咱們看看來如何使用它.

咱們直接新建項.如圖選擇:

點擊添加,會添加4個文件,如圖:

咱們一個個來說解.

首先,第一個MasterDetailPageTest.是整個頁面的主入口(注意,這裏說的是入口)

只有它繼承了Xamarin.Forms.MasterDetailPage,

咱們看看他的xaml,如圖:

會發現他包含了2個屬性,一個是Master(你的主頁面) 一個Detail(你的次頁面)

其餘的標籤,咱們先不談,後面會講.

而後咱們在來看看MasterDetailPageTestMaster與MasterDetailPageTestDetail,會發現,他們都繼承的是ContentPage

因此,其實他們只是單純的內容頁而已~

這樣,咱們就完成了一個基礎的MasterDetailPage.

一樣我麼回到MainPage,編寫Button_Clicked1事件以下:

 private void Button_Clicked_1(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new MasterDetailPage.MasterDetailPageTest());
        }

4.TabbedPage(Tab頁面)

也是咱們很常見的,tab標籤頁面效果以下:

一樣,咱們先來建立這個TabbedPage.如圖:

而後,咱們進入它的xaml標籤中,添加內容以下:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoApp.TabbedPage.TabbedPageTest">
  <!--Pages can be added as references or inline-->
    <ContentPage Title="標籤1">
        <Label Text="標籤1內容"></Label>
    </ContentPage>

    <ContentPage Title="標籤2" >
        <Label Text="標籤2內容"></Label>
    </ContentPage>
    <ContentPage Title="標籤3" >
        <Label Text="標籤3內容"></Label>
    </ContentPage>
</TabbedPage>