【轉】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 的方式加載數據

private async Task ExecuteLoadItemsCommand()
        {
            if (isBusy)
                return;

            IsBusy = true;

            try{

                var httpClient = new HttpClient();

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


                var responseString = await httpClient.GetStringAsync(feed);

                FeedItems.Clear();

                var items= await ParseFeed(responseString);

                foreach(var item in items)
                {

                    //Console.WriteLine(item.Title);
                    FeedItems.Add(item);
                }
            }
            catch(Exception ex){

                var page = new ContentPage ();

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

            }

            IsBusy = false;

        }

private async Task<List<FeedItem>> ParseFeed(string rss)
        {
            return await Task.Run (() => {
                var xdoc=XDocument.Parse(rss);

                var id=0;

                return ( from item in xdoc.Descendants("item")
                    select new FeedItem
                    {
                        Title = (string)item.Element("title"),
                        Description=(string)item.Element("description"),
                        PublishDate=(string)item.Element("pubDate"),
                        Id= id++
                    }).ToList();
            });
        }

5. 通過Xamarin Forms 構造View

          這里需要創建一個簡單的表單ListView, 和自定義Cell, 當然Xamarin Forms會依舊平台進行相應渲染生成原生的表單支持

public class FeedView : ContentPage
    {
        private FeedViewModel ViewModel{
            get {  return BindingContext as FeedViewModel;  }
        }

        public FeedView ()
        {

            BindingContext = new FeedViewModel ();

            var stack = new StackLayout {
                Orientation= StackOrientation.Vertical,
                Padding = new Thickness(0,8,0,8)
            };

            var listView = new ListView ();


            listView.ItemsSource = ViewModel.FeedItems;

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

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

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

            listView.ItemTemplate = cell;


            stack.Children.Add (listView);

            Content = stack;
        }

        protected override void OnAppearing()
        {
            base.OnAppearing ();

            if (ViewModel == null || !ViewModel.CanLoadMore || ViewModel.IsBusy || ViewModel.FeedItems.Count > 0)
                return;

            ViewModel.LoadItemsCommand.Execute (null);
        }
    }

6. 運行看看

歡迎大家下載我的代碼看看 點擊下載