使用Xamarin.Forms跨平臺開發入門 Hello,Xamarin.Forms 第一部分 快速入門

本文介紹瞭如何使用VisualStudio開發Xamarin.Forms 應用程序和使用Xamarin.Forms開發應用的基礎知識，包括了構建和發佈Xamarin.Forms應用的工具，概念和步驟。 本文是從Xamarin 開發文檔中摘取並翻譯的，能夠參見原文： https://developer.xamarin.com/guides/xamarin-forms/getting-started/hello-xamarin-forms/quickstart/#

第一部分 快速入門

本文的第一部分演示瞭如何建立一個電話號碼本翻譯的應用，他能夠將用戶使用字母輸入的電話號碼翻譯成真正數字的電話號碼，而後撥出並呼叫該號碼。這個應用對於外國人來講頗有用，可是對於中國人來講好像沒啥用。可是做爲入門課程，仍是很值得學一學的。 該程序運行起來象以下這個圖片的樣子，叫作Phoneword。 下面就跟着這些步驟來作:

 

1.啓動Visual Studio(一下簡稱VS)，進入起始頁。

2.在VS,點擊 New Project 來創建一個新項目

3.在新項目對話框，點擊Cross-Platform(跨平臺),選擇Blank Xaml App(Xamarin.Forms Portable) 模板，設置名字和解決方案的名字爲PhoneWord，選一個合適的位置保存本項目，點擊OK。

4.在Solution Explorer窗口，右擊Phoneword解決方案，並選擇Manage Nuget Packaages for Solution。

5.在Manage Packges for Solution(管理解決方案的包) 對話框，選擇，Updates 頁，而後選擇Xamarin.Forms包，確保將包更新至stable release(最新發行版本)。

6.在解決方案瀏覽器窗口(Solution Explorer)內,Phoneword 項目裏，雙擊MainPage.xaml 打開它。

7.將該文件的全部行去掉，換成下面這些內容。這些內容定義了用戶界面。而後按Ctrl+S 保存，而後關閉此文件。

<?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="Phoneword.MainPage">
     <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="20, 40, 20, 20"
                    Android="20, 20, 20, 20"
                    WinPhone="20, 20, 20, 20" />
     </ContentPage.Padding>
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand"
                     HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     Spacing="15">
            <Label Text="Enter a Phoneword:" />
            <Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" />
            <Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" />
            <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

8.在解決方案瀏覽器，展開MainPage.xaml並雙擊MainPage.xaml.cs打開。

9.去掉這個文件中的全部代碼，並替換成下面的內容。

 1 using System;
 2 using Xamarin.Forms;
 3 
 4 namespace Phoneword
 5 {
 6     public partial class MainPage : ContentPage
 7     {
 8         string translatedNumber;
 9 
10         public MainPage ()
11         {
12             InitializeComponent ();
13         }
14 
15         void OnTranslate (object sender, EventArgs e)
16         {
17             translatedNumber = Core.PhonewordTranslator.ToNumber (phoneNumberText.Text);
18             if (!string.IsNullOrWhiteSpace (translatedNumber)) {
19                 callButton.IsEnabled = true;
20                 callButton.Text = "Call " + translatedNumber;
21             } else {
22                 callButton.IsEnabled = false;
23                 callButton.Text = "Call";
24             }
25         }
26 
27         async void OnCall (object sender, EventArgs e)
28         {
29             if (await this.DisplayAlert (
30                     "Dial a Number",
31                     "Would you like to call " + translatedNumber + "?",
32                     "Yes",
33                     "No")) {
34                 var dialer = DependencyService.Get<IDialer> ();
35                 if (dialer != null)
36                     dialer.Dial (translatedNumber);
37             }
38         }
39     }
40 }

按CTRL+S保存它，而後關閉。

10.解決方案瀏覽器窗口裏，展開App.xaml,雙擊App.xaml.cs 打開。

11.移除全部內容，替換成下面的代碼。 這裏，App的構造函數簡單地設置MainPage 類爲應用程序啓動頁。

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace Phoneword
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new MainPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

 

按CTRL+S保存，而後關閉它。

12.右擊Phoneword 項目，選擇Add->New Item..

13.在Add New Item 對話框內，選擇Visual C#->Code->Class,添加一個類，並命名爲PhoneTranslator,而後點擊Add按鈕。

14.移除PhoneTranslator.cs中全部內容，替換成以下代碼。這段代碼將把電話單詞翻譯成電話號碼。

using System.Text;

namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return null;

            raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                    newNumber.Append(c);
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                    // Bad character?
                    else
                        return null;
                }
            }
            return newNumber.ToString();
        }

        static bool Contains(this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static readonly string[] digits = {
            "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
        };

        static int? TranslateToNumber(char c)
        {
            for (int i = 0; i < digits.Length; i++)
            {
                if (digits[i].Contains(c))
                    return 2 + i;
            }
            return null;
        }
    }
}

而後保存並關閉它。

15.添加新接口。在Phoneword項目上右擊，選擇Add->New Item..

16.在Add New Item對話框內，選擇Visual C#->Code->Interface,命名爲IDialer，點擊Add按鈕。

17.將該文件替換成以下內容: namespace Phoneword { public interface IDialer { bool Dial(string number); } } 而後保存並關閉它。 到目前爲止，本應用的通用代碼已經完成了。下面是與平臺相關的撥號器代碼，它將實現爲一個DependencyService.

namespace Phoneword
{
    public interface IDialer
    {
        bool Dial(string number);
    }
}

 

18.右擊Phoneword.IOS項目，選擇Add->New Item..

19.在Add New Item對話框內，選擇Apple->Code->Class 命名爲PhoneDialer，而後點擊Add按鈕。

20.將該文件替換成以下代碼。這段代碼建立了Dial方法，他將在IOS平臺上撥出翻譯後的電話號碼。

using Foundation;
using Phoneword.iOS;
using UIKit;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.iOS
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            return UIApplication.SharedApplication.OpenUrl (
                new NSUrl ("tel:" + number));
        }
    }
}

而後保存並關閉。

21.在解決方案窗口，右擊Phoneword.Droid項目並選擇添加新項(Add->New Item..)。

22.添加新項對話框內選擇 Visual C#->Android->Class,命名爲PhoneDialer。而後單擊Add 按鈕。

23.將該文件替換成以下代碼，該代碼的Dial方法將在Android平臺上撥出翻譯完的電話號碼。

using Android.Content;
using Android.Telephony;
using Phoneword.Droid;
using System.Linq;
using Xamarin.Forms;
using Uri = Android.Net.Uri;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.Droid
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            var context = Forms.Context;
            if (context == null)
                return false;

            var intent = new Intent (Intent.ActionCall);
            intent.SetData (Uri.Parse ("tel:" + number));

            if (IsIntentAvailable (context, intent)) {
                context.StartActivity (intent);
                return true;
            }

            return false;
        }

        public static bool IsIntentAvailable(Context context, Intent intent)
        {
            var packageManager = context.PackageManager;

            var list = packageManager.QueryIntentServices (intent, 0)
                .Union (packageManager.QueryIntentActivities (intent, 0));

            if (list.Any ())
                return true;

            var manager = TelephonyManager.FromContext (context);
            return manager.PhoneType != PhoneType.None;
        }
    }
}

而後保存並關閉它。

24.雙擊Phoneword.Droid項目的 Properties，並選擇Android Manifest頁。

25.在Required permissions裏，選中CALL_PHONE權限並打勾。這將容許本應用進行電話撥號。 保存並關閉之

26.在解決方案窗口，右擊Phoneword.UWP項目並選擇添加新項(Add->New Item..)。

27.添加新項對話框內選擇 Visual C#->Android->Class,命名爲PhoneDialer。而後單擊Add 按鈕。

28.將該文件替換成以下代碼，該代碼的Dial方法將在Windows通用平臺上撥出翻譯完的電話號碼。

using Phoneword.UWP;
using System;
using System.Threading.Tasks;
using Windows.ApplicationModel.Calls;
using Windows.UI.Popups;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.UWP
{
    public class PhoneDialer : IDialer
    {
        bool dialled = false;

        public bool Dial(string number)
        {
            DialNumber(number);
            return dialled;
        }

        async void DialNumber(string number)
        {
            var phoneLine = await GetDefaultPhoneLineAsync();
            if (phoneLine != null)
            {
                phoneLine.Dial(number, number);
                dialled = true;
            }
            else
            {
                var dialog = new MessageDialog("No line found to place the call");
                await dialog.ShowAsync();
                dialled = false;
            }
        }

        async Task<PhoneLine> GetDefaultPhoneLineAsync()
        {
            var phoneCallStore = await PhoneCallManager.RequestStoreAsync();
            var lineId = await phoneCallStore.GetDefaultLineAsync();
            return await PhoneLine.FromIdAsync(lineId);
        }
    }
}

保存並關閉它。

29.在Phoneword.UWP項目內，右擊References,並選擇Add Reference 添加引用。

30.引用管理器窗口內，選擇Universal Windows->Extensions->Windows MobleExtensions for UWP,點擊OK。

31.在Phoneword.UWP工程內，雙擊Package.appxmanifest。

32.在Capabilities頁，將Phone Call 項打勾，這能夠讓本應用有呼叫電話的權限。而後保存並關閉。

33.選擇Build->Build Solution菜單項，或按CTRL+SHIFT+B。項目將會進行構建，在狀態欄內會出現成功的消息。若是遇到什麼錯誤，重複前面的步驟並矯正錯誤直到構建成功。

34.解決方案窗口，右擊Phoneword.UWP項目，並選擇Set as StartUp Project。將其設置爲啓動項目。

35.在VS的工具條內，按Start 按鈕。運行該應用。

36.解決方案窗口，右擊Phoneword.Droid項目，選擇Set as StartUp Project。

37.在VS工具條內，按Start按鈕，程序將在Android模擬器中運行。

38.若是你有一個IOS設備，知足Mac系統的Xamarin.Forms開發需求，用相似的技術發佈應用到IOS設備上。注意:模擬器上都不支持撥打電話功能。

OK，恭喜你已經完成了Xamarin.Forms 應用！