【轉】Xamarin Forms 介紹

特此聲明，本篇博文轉自：http://blog.csdn.net/kinfey/article/details/29621381

---

什麼是 Xamarin Forms ?

Xamarin Forms 是一個高效建立跨平臺用戶界面的庫 。經過Xamarin Forms 能夠一次編碼生成基於主流移動平臺（iOS, Android, Windows Phone）的應用界面。和HTML 5 不一樣， 它是一套原生的界面解決方案，這意味着經過Xamarin Forms 渲染的界面是與底層API 緊密相連， 那你能夠結合諸如iOS 中的Core Motion ， PassKit 還有StoreKit 這些API 使用 ，也可使用諸如NFC / Google Play Service 的Android API ,固然少不了Windows Phone 的Tiles 。

Xamarin Forms 的優點

       經過一次編碼，生成多平臺界面。倘若你作的工做涉及到三個平臺，那你會對重重複復的界面邏輯工做厭煩，Xamarin Forms 真的是一個不錯的解決方案。

使用 Xamarin Forms

       你能夠經過C#硬編碼方式去架構你的界面，還有你能夠經過XAML方式去構建。 

Xamarin Forms 能適配的界面

Pages (頁面)

Layout(佈局)

Controls(控件)

好來看看一個簡單的例子，因爲這篇文章只是初探，我只會把部分精彩的節錄下來，你們能夠下載代碼細看。若是要探究就繼續關注個人blog , 接下來會陸續有關於Xamarin Forms 的更深刻文章。

1. 建立Xamarin.Forms 項目

這裏須要說明一點，Xamarin Forms項目有兩種模版一種是基於Share Project ,一種是基於PCL ,這裏要看各自項目的須要，我默認選取PCL（關於兩個模版的使用，我會在以後文章和你們說說）

2. 建立成功後，會生成包含CnBetaDemo.Shared，CnBetaDemo.iOS, CnBetaDemo.Android 三個項目(若是你用Visual Studio 建立你就會有CnBetaDemo.Windows Phone 的項目) 。 CnBetaDemo.Shared就是咱們須要處理的共享邏輯層和Xamarin.Forms。其他兩個就是咱們所須要對應的平臺。

3.依據MVVM 方式架構咱們的CnBetaDemo.Shared , 這裏不得不提到Xamarin 的原理 。Xamarin 是一個基於共享邏輯層的跨平臺原生應用方案。

爲什麼用MVVM 在我以前文章有所說起。（博客決定放到csdn，我會遷移後貼上地址）。以前一年的作法是把邏輯共享，如今能夠把頁面經過Xamarin.Forms進行構造便可，因此CnBetaDemo.Shared就成爲了咱們跨平臺架構項目的核心代碼層。

4.  簡單看看ViewModel層 ，這裏我以讀取CnBeta RSS 爲例 ，FeedViewModel 的一些主要代碼：

主要經過async和await 的方式加載數據

   1:  private async Task ExecuteLoadItemsCommand()

   2:          {

   3:              if (isBusy)

   4:                  return;

   5:   

   6:              IsBusy = true;

   7:   

   8:              try{

   9:   

  10:                  var httpClient = new HttpClient();

  11:   

  12:                  var feed="http://cnbeta.feedsportal.com/c/34306/f/624776/index.rss";

  13:   

  14:   

  15:                  var responseString = await httpClient.GetStringAsync(feed);

  16:   

  17:                  FeedItems.Clear();

  18:   

  19:                  var items= await ParseFeed(responseString);

  20:   

  21:                  foreach(var item in items)

  22:                  {

  23:   

  24:                      //Console.WriteLine(item.Title);

  25:                      FeedItems.Add(item);

  26:                  }

  27:              }

  28:              catch(Exception ex){

  29:   

  30:                  var page = new ContentPage ();

  31:   

  32:                  var result = page.DisplayAlert ("出錯 ", "加載失敗.", "確認", null);

  33:   

  34:              }

  35:   

  36:              IsBusy = false;

  37:   

  38:          }

   1:  private async Task<List<FeedItem>> ParseFeed(string rss)

   2:          {

   3:              return await Task.Run (() => {

   4:                  var xdoc=XDocument.Parse(rss);

   5:   

   6:                  var id=0;

   7:   

   8:                  return ( from item in xdoc.Descendants("item")

   9:                      select new FeedItem

  10:                      {

  11:                          Title = (string)item.Element("title"),

  12:                          Description=(string)item.Element("description"),

  13:                          PublishDate=(string)item.Element("pubDate"),

  14:                          Id= id++

  15:                      }).ToList();

  16:              });

  17:          }

5. 經過Xamarin Forms 構造View

          這裏須要建立一個簡單的表單ListView, 和自定義Cell, 固然Xamarin Forms會依舊平臺進行相應渲染生成原生的表單支持

   1:  public class FeedView : ContentPage

   2:      {

   3:          private FeedViewModel ViewModel{

   4:              get {  return BindingContext as FeedViewModel;  }

   5:          }

   6:   

   7:          public FeedView ()

   8:          {

   9:   

  10:              BindingContext = new FeedViewModel ();

  11:   

  12:              var stack = new StackLayout {

  13:                  Orientation= StackOrientation.Vertical,

  14:                  Padding = new Thickness(0,8,0,8)

  15:              };

  16:   

  17:              var listView = new ListView ();

  18:   

  19:   

  20:              listView.ItemsSource = ViewModel.FeedItems;

  21:   

  22:              var cell = new DataTemplate (typeof(ListTextCell));

  23:   

  24:              cell.SetBinding (TextCell.TextProperty, "Title");

  25:   

  26:              cell.SetBinding (TextCell.DetailProperty, "PublishDate");

  27:   

  28:              listView.ItemTemplate = cell;

  29:   

  30:   

  31:              stack.Children.Add (listView);

  32:   

  33:              Content = stack;

  34:          }

  35:   

  36:          protected override void OnAppearing()

  37:          {

  38:              base.OnAppearing ();

  39:   

  40:              if (ViewModel == null || !ViewModel.CanLoadMore || ViewModel.IsBusy || ViewModel.FeedItems.Count > 0)

  41:                  return;

  42:   

  43:              ViewModel.LoadItemsCommand.Execute (null);

  44:          }

  45:      }

6. 運行看看

歡迎你們下載個人代碼看看 點擊下載