Xamarin.Forms入門-使用 Xamarin.Forms 來建立跨平臺的用戶界面

Xamarin.Forms 是一個跨平臺的、基於原生控件的UI工具包，開發人員能夠輕鬆的建立適用於 Android，iOS 以及 Windows Phone的用戶界面。Xamarin.Forms 經過使用平臺的原生控件來渲染用戶界面，使用 Xamarin.Forms 的 App在外觀上與平臺徹底一致。經過本文您能夠快速瞭解如何使用 Xamarin.Form 來進行應用程序的開發。

 

簡介

Xamarin.Forms能夠幫助開發人員快速的構建跨平臺的UI，經過一次編碼，生成多平臺界面。若是你作的工做涉及到三個平臺，那你會對重重複復的界面邏輯工做厭煩，Xamarin Forms 是一個好的解決方案。

Xamarin.Forms容許開發人員使用C#語言來快速構建UI界面，因爲基於Xamarin.Forms開發的應用程序徹底是原生的，它的受限不多，例如瀏覽器沙盒、底層API限制還有性能，相反它徹底可使用底層操做系統提供的API，例如iOS上的CoreMotion, PassKit, 和 StoreKit，安卓上的NFC和Google Play Services。這意味着你可使用Xamarin.Forms來構建應用程序的UI，使用原生的語言來構建其餘部分。

基於Xamarin.Forms開發的應用程序在架構上採用了共享邏輯層的跨平臺方案，一般的方式是使用 Portable Libraries 或者 Shared Projects 來共享邏輯層代碼，平臺相關的部分能夠享有這部分代碼。

Xamarin的代碼共享方案：

開發人員能夠經過C#代碼來直接構建Xamarin.Forms的UI，另外還能夠經過 XAML 來構建，運行時的行爲須要寫在你另一個對應的文件中。

本文將會介紹整個Xamarin.Forms框架的核心和基礎概念，包括：

· 如何安裝 Xamarin.Forms

· 在 Visual Studio和Xamarin Studio中創建 Xamarin.Forms的項目

· 如何使用Xamarin.Forms的控件

· 如何在頁面之間進行導航

· 如何進行數據綁定

系統需求

iOS : 因爲Apple限制iOS應用程式編譯都須要透過Xcode, 所以須要1臺MAC的機器做爲Build Host.

· Windows 7 或更新的做業系統版本

· Visual Studio 2010 / 2012

· OS X Lion 或更新的做業系統版本

· Xcode IDE 以及 iOS SDK

Android : 對於Android開發, 則能夠徹底在Windows 上進行. 其系統需求以下:

· Windows 7 或更新的做業系統版本

· Java SDK

· Android SDK

· Xamarin.Android for Visual Studio

使用Xamarin Forms開始編程

開發人員能夠在Xamarin Studio和Visual Studio中建立 Xamarin.Forms的項目，有四種項目類型能夠選擇：

Portable Library：用於代碼共享的類庫

Xamarin.Android Application：安卓應用程序

Xamarin.iOS Application：iOS應用程序

Windows Phone Application：Windows Phone 應用程序

在Xamarin Studio中，選擇 File > New > Solution, 當New Solution對話框出現後，點擊 C#>Mobile Apps， 而後選擇 Blank App (Tamarin.Forms Portable)，以下圖：

輸入項目名稱 「HelloXamarinFormsWorld」，點擊 OK，整個新的工程將會被建立，以下圖：

 

Xamarin.Froms 應用程序

若是你運行上面的程序，會看見下面的畫面：

Xamarin.Forms中每個屏幕畫面都有對應概念叫：Page，Xamarin.Forms.Page 在安卓中與 Activity對應，在 iOS 中與 ViewController對應，在Windows Phone中與Page對應。

當前的工程正是使用了 Xamarin.Forms.ContentPage ，在其上面添加了一個 Label 控件。App類型負責初始化應用程序的首頁，以下面的例子：

public class App { public static Page GetMainPage() { return new ContentPage { Content = new Label { Text = "Hello, Forms !", VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.CenterAndExpand, }, }; } }

上述的代碼初始化了一個 ContentPage，而且放了一個豎直、水平都居中的Label在上面。

使用 Xamarin.Forms Page

Android

建立一個Activity類型，而且使用 MainLauncher 特性修飾，在 OnCreate 方法中，初始化Xamarin.Forms框架，而後設定初始界面，以下面的代碼：

namespace HelloXamarinFormsWorld.Android { [Activity(Label = "HelloXamarinFormsWorld", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : AndroidActivity { protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); Xamarin.Forms.Forms.Init(this, bundle); SetPage(App.GetMainPage()); } } }

運行上面的代碼：

iOS

對於Xamarin.iOS應用程序，在AppDelegate的FinishedLaunching方法中，首先初始化Xamarin.Forms框架，而後設定RootViewController爲 Xamarin.Forms的Page類型，以下面的代碼：

[Register("AppDelegate")] public partial class AppDelegate : UIApplicationDelegate { UIWindow window; public override bool FinishedLaunching(UIApplication app, NSDictionary options) { Forms.Init(); window = new UIWindow(UIScreen.MainScreen.Bounds); window.RootViewController = App.GetMainPage().CreateViewController(); window.MakeKeyAndVisible(); return true; } }

運行上面的代碼：

Windows Phone

Windows Phone的作法與上面兩種相似，不解釋，直接上代碼：

public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); Forms.Init(); Content = HelloXamarinFormsWorld.App.GetMainPage().ConvertPageToUIElement(this); } }

如今咱們對於Xamarin.Forms有了必定的瞭解，然咱們繼續瞭解其餘的一些東西。

視圖與佈局

Xamarin.Forms使用控件來進行佈局，在運行時每個控件都會對應一個原生控件，咱們常常會使用下面的類型來構建UI。

View - 一般指的是Label，Button以及輸入框等等

Page - 一個單獨的screen，對應的概念是 Android Activity，Windows Phone Page 以及 iOS View Controller.

Layout - 佈局或者容器控件

Cell - 表格或者列表控件的子項目

經常使用控件：

Xamarin.Forms 控件	描述
Label	只讀的文本展現控件
Entry	單行的文本輸入框
Button	按鈕
Image	圖片
ListView	列表控件

Xamarin.Forms有兩種不一樣類型的容器控件：

Managed Layout - 與CSS的盒模型相似，經過設定子控件的位置和大小來進行佈局，應用程序再也不直接設定子控件的位置，最多見的例子就是 StackLayout。

Unmanaged Layouts - 與Managed Layout不一樣，開發人員須要直接設定子控件的位置和大小，常見的例子就是 AbsoluteLayout。

接下來咱們再仔細討論這兩種佈局方式：

堆棧式佈局

堆棧式佈局是一種很是經常使用的佈局方式，能夠極大地的簡化跨平臺用戶界面的搭建。堆棧式佈局的子元素會按照添加到容器中的順序一個接一個被擺放，堆棧式佈局有兩個方向：豎直與水平方向。

下面的代碼會把三個 Label 控件添加到 StackLayout 中去。

public class StackLayoutExample: ContentPage { public StackLayoutExample() { Padding = new Thickness(20); var red = new Label { Text = "Stop", BackgroundColor = Color.Red, Font = Font.SystemFontOfSize (20) }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, Font = Font.SystemFontOfSize (20) }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, Font = Font.SystemFontOfSize (20) }; Content = new StackLayout { Spacing = 10, Children = { red, yellow, green } }; } }

下面使用了XAML來構建界面：

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample1" Padding="20"> <StackLayout Spacing="10"> <Label Text="Stop" BackgroundColor="Red" Font="20" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" /> <Label Text="Go" BackgroundColor="Green" Font="20" /> </StackLayout> </ContentPage>

StackLayout 默認是豎直方向，運行上面的代碼，運行結果以下：

將佈局方向改成水平方向：

public class StackLayoutExample: ContentPage { public StackLayoutExample() { // Code that creates labels removed for clarity Content = new StackLayout { Spacing = 10, VerticalOptions = LayoutOptions.End, Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Start, Children = { red, yellow, green } }; } }

XAML：

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample2" Padding="20"> <StackLayout Spacing="10" VerticalOptions="End" Orientation="Horizontal" HorizontalOptions="Start"> <Label Text="Stop" BackgroundColor="Red" Font="20" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" /> <Label Text="Go" BackgroundColor="Green" Font="20" /> </StackLayout> </ContentPage>

下面是運行結果：

在StackLayout中咱們能夠經過 HeightRequest和 WidthRequest指定子元素的高度和寬度：

var red = new Label { Text = "Stop", BackgroundColor = Color.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 100 }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, Font = Font.SystemFontOfSize (20), WidthRequest = 100 }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, Font = Font.SystemFontOfSize (20), WidthRequest = 200 }; Content = new StackLayout { Spacing = 10, VerticalOptions = LayoutOptions.End, Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Start, Children = { red, yellow, green } };

XAML：

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample3" Padding="20"> <StackLayout Spacing="10" VerticalOptions="End" Orientation="Horizontal" HorizontalOptions="Start"> <Label Text="Stop" BackgroundColor="Red" Font="20" WidthRequest="100" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" WidthRequest="100" /> <Label Text="Go" BackgroundColor="Green" Font="20" WidthRequest="200" /> </StackLayout> </ContentPage>

下面試運行結果：

絕對佈局

絕對佈局相似於Windows Forms佈局，須要指定每個子元素的位置。

下面是一個例子：

public class MyAbsoluteLayoutPage : ContentPage { public MyAbsoluteLayoutPage() { var red = new Label { Text = "Stop", BackgroundColor = Color.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 200, HeightRequest = 30 }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, Font = Font.SystemFontOfSize (20), WidthRequest = 160, HeightRequest = 160 }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, Font = Font.SystemFontOfSize (20), WidthRequest = 50, HeightRequest = 50 }; var absLayout = new AbsoluteLayout(); absLayout.Children.Add(red, new Point(20,20)); absLayout.Children.Add(yellow, new Point(40,60)); absLayout.Children.Add(green, new Point(80,180)); Content = absLayout; } }

XAML：

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.AbsoluteLayoutExample" Padding="20"> <AbsoluteLayout> <Label Text="Stop" BackgroundColor="Red" Font="20" AbsoluteLayout.LayoutBounds="20,20,200,30" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" AbsoluteLayout.LayoutBounds="40,60,160,160" /> <Label Text="Go" BackgroundColor="Green" Font="20" AbsoluteLayout.LayoutBounds="80,180,50,50" /> </AbsoluteLayout> </ContentPage>

運行上面的代碼，結果以下：

子元素添加到容器中的順序會影響子元素的Z-Order，上面的例子中會發現第一個添加的元素會被後面添加的元素遮住。

列表

ListView是一個很是常見的控件，用於展示一組數據，每個條目都會被包含在一個單元格內部。默認狀況下ListView使用了一個 TextCell做爲模板來展示每個條目數據。

參見下面的代碼：

var listView = new ListView { RowHeight = 40 }; listView.ItemsSource = new string [] { "Buy pears", "Buy oranges", "Buy mangos", "Buy apples", "Buy bananas" }; Content = new StackLayout { VerticalOptions = LayoutOptions.FillAndExpand, Children = { listView } };

運行代碼結果以下：

綁定數據

ListView也能夠綁定自定義數據類型，以下：

public class TodoItem { public string Name { get; set; } public bool Done { get; set; } }

綁定數據到ListView

listView.ItemsSource = new TodoItem [] { new TodoItem {Name = "Buy pears"}, new TodoItem {Name = "Buy oranges", Done=true}, new TodoItem {Name = "Buy mangos"}, new TodoItem {Name = "Buy apples", Done=true}, new TodoItem {Name = "Buy bananas", Done=true} };

設定展示數據：

listView.ItemTemplate = new DataTemplate(typeof(TextCell)); listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Name");

上述代碼的運行結果與上面一個例子同樣。

選擇條目

經過ItemSelected事件咱們能夠知道當前選中的條目：

listView.ItemSelected += async (sender, e) => { await DisplayAlert("Tapped!", e.SelectedItem + " was tapped.", "OK"); };

在ItemSelected事件中咱們已能夠進行頁面導航：

listView.ItemSelected += async (sender, e) => { var todoItem = (TodoItem)e.SelectedItem; var todoPage = new TodoItemPage(todoItem); // so the new page shows correct data await Navigation.PushAsync(todoPage); };

自定義單元格樣式

考慮下面的單元格樣式：

上面的單元格包含了一個Image控件，兩個 Label 控件，下面的代碼能夠很容易的構建上面的佈局：

class EmployeeCell : ViewCell { public EmployeeCell() { var image = new Image { HorizontalOptions = LayoutOptions.Start }; image.SetBinding(Image.SourceProperty, new Binding("ImageUri")); image.WidthRequest = image.HeightRequest = 40; var nameLayout = CreateNameLayout(); var viewLayout = new StackLayout() { Orientation = StackOrientation.Horizontal, Children = { image, nameLayout } }; View = viewLayout; } static StackLayout CreateNameLayout() { var nameLabel = new Label { HorizontalOptions= LayoutOptions.FillAndExpand }; nameLabel.SetBinding(Label.TextProperty, "DisplayName"); var twitterLabel = new Label { HorizontalOptions = LayoutOptions.FillAndExpand, Font = Fonts.Twitter }; twitterLabel.SetBinding(Label.TextProperty, "Twitter"); var nameLayout = new StackLayout() { HorizontalOptions = LayoutOptions.StartAndExpand, Orientation = StackOrientation.Vertical, Children = { nameLabel, twitterLabel } }; return nameLayout; } }

自定義單元格建立完畢後，綁定數據源到ListView

List<Employee> myListOfEmployeeObjects = GetAListOfAllEmployees(); var listView = new ListView { RowHeight = 40 }; listView.ItemsSource = myListOfEmployeeObjects; listView.ItemTemplate = new DataTemplate(typeof(EmployeeCell));

使用XAML構建自定義單元格

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:XamarinFormsXamlSample;assembly=XamarinFormsXamlSample" xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample" x:Class="XamarinFormsXamlSample.Views.EmployeeListPage" Title="Employee List"> <ListView x:Name="listView" IsVisible="false" ItemsSource="{x:Static local:App.Employees}" ItemSelected="EmployeeListOnItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <StackLayout Orientation="Horizontal"> <Image Source="{Binding ImageUri}" WidthRequest="40" HeightRequest="40" /> <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"> <Label Text="{Binding DisplayName}" HorizontalOptions="FillAndExpand" /> <Label Text="{Binding Twitter}" Font="{x:Static constants:Fonts.Twitter}"/> </StackLayout> </StackLayout> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage>

數據綁定

經過數據綁定Xamarin.Forms的控件能夠展現數據層的數據，還能夠經過編輯控件將更改同步到數據層。

爲了更好的理解數據綁定，看下面的畫面：

該頁面包含了下列的控件：

· Xamarin.Forms.Image

· Xamarin.Forms.Label

· Xamarin.Forms.Entry

· Xamarin.Forms.Button

在頁面的構造函數中，將業務數據傳入，而且設定數據綁定：

public EmployeeDetailPage(Employee employeeToDisplay) { this.BindingContext = employeeToDisplay; var firstName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand }; firstName.SetBinding(Entry.TextProperty, "FirstName"); // Rest of the code omitted… }

頁面導航

如今咱們已經瞭解瞭如何建立頁面，以及如何添加控件，接下來咱們會討論如何進行頁面導航。頁面導航能夠理解爲一個後進先出的堆棧結構，展示一個頁面至關於在堆棧中添加一個元素，若是須要回到前一個頁面，就須要把當前的頁面從堆棧中刪除。

Xamarin.Forms 定義了 INavigation 接口來處理頁面導航相關的邏輯：

public interface INavigation { Task PushAsync(Page page); Task<Page> PopAsync(); Task PopToRootAsync(); Task PushModalAsync(Page page); Task<Page> PopModalAsync(); }

NavigationPage 類型實現了這個接口，而且在屏幕的頂部添加了導航條，除了顯示當前頁面的標題外，還有一個返回的按鈕。下面的代碼就是使用 NavigationPage 的例子：

public static Page GetMainPage() { var mainNav = new NavigationPage(new EmployeeListPage()); return mainNav; }

若是但願顯示 LoginPage，使用 PushAync 方法將 LoginPage加入堆棧中：

await Navigation.PushAsync(new LoginPage());

若是但願返回原有頁面，調用 PopAsync方法：

await Navigation.PopAsync();

若是但願彈出模態對話框，方法是相似的：

await Navigation.PushModalAsync(new LoginPage());

返回原有頁面：

await Navigation.PopModalAsync();

小結

本文討論了 Xamarin.Forms 是什麼，以及如何使用 Xamarin.Forms 來構建跨平臺的應用，咱們從如何安裝 Xamarin.Forms，到如何建立一個 Xamarin.Forms 項目，如何構建用戶界面，如何進行數據綁定以及如何切換頁面。目前已有部分產品支持 Xamarin.Forms，其中值得一提的是 ComponentOne Studio for Xamarin，它是 Xamarin 平臺的原生移動控件集，爲安卓、iOS、Windows Phone提供一致的體驗，使用相同的API跨越全部平臺。

 

參考原文：An Introduction to Xamarin.Forms