Xamarin.Forms快速入門

本演練示範如何建立将使用者輸入的字母數字電話号碼轉換為數字電話号碼的應用程式，并調用該号碼。 最終的應用如下所示：

建立Phoneword應用程式如下：

1. 在“開始”螢幕中，啟動Visual Studio。 這将打開起始頁：

   

2. 在Visual Studio中，單擊建立新項目...以建立新項目：

   

3. 在“建立項目”對話框中，單擊“跨平台”，選擇“跨平台應用程式（Xamarin.Forms或Native）”模闆，将名稱和解決方案名稱設定為Phoneword，為項目選擇合适的位置，然後單擊确定按鈕：

   

4. 在“新跨平台應用程式”對話框中，單擊空白應用程式，選擇Xamarin.Forms作為UI技術，選擇便攜式類庫（PCL）作為代碼共享政策，然後單擊确定按鈕：

   

5. 在新的通用Windows項目對話框中，選擇通用Windows平台（UWP）應用程式将支援的目标和最低版本的Windows 10：

   

6. 在解決方案資料總管中，右鍵單擊Phoneword解決方案，然後選擇Manage NuGet Packages for Solution ...：

   

7. 在“管理軟體包解決方案”對話框中，選擇更新頁籤，選擇Xamarin.Forms軟體包，并将軟體包更新為最新的穩定版本：

   

8. 在解決方案資料總管中，在Phoneword項目中，輕按兩下MainPage.xaml打開它：

   

9. 在MainPage.xaml中，删除所有的模闆代碼，并将其替換為以下代碼。 該代碼聲明性地定義了頁面的使用者界面：

   點選(此處)折疊或打開

   1. ?xml version="1.0" encoding="UTF-8"?>
   2. ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
   3.                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   4.                    x:Class="Phoneword.MainPage">
   5.     ContentPage.Padding>
   6.         OnPlatform x:TypeArguments="Thickness">
   7.             On Platform="iOS" Value="20, 40, 20, 20" />
   8.             On Platform="Android, WinPhone, Windows" Value="20" />
   9.         /OnPlatform>
   10.     /ContentPage.Padding>
   11.     StackLayout>
   12.       Label Text="Enter a Phoneword:" />
   13.       Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" />
   14.       Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" />
   15.       Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
   16.     /StackLayout>
   17. /ContentPage>
   通過按CTRL+S将更改儲存到MainPage.xaml，然後關閉檔案。
10. 在解決方案資料總管中，展開MainPage.xaml并輕按兩下MainPage.xaml.cs将其打開：

    

11. 在MainPage.xaml.cs中，删除所有模闆代碼，并将其替換為以下代碼。 OnTranslate和OnCall方法将分别在使用者界面中單擊Translate和Call按鈕時執行：

    點選(此處)折疊或打開

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

    注意：此時嘗試建構應用程式将導緻稍後修複的錯誤。

    通過按CTRL+S将更改儲存到MainPage.xaml.cs，然後關閉檔案。

12. 在解決方案資料總管中，展開App.xaml并輕按兩下App.xaml.cs打開它：

    

13. 在App.xaml.cs中，删除所有的模闆代碼，并将其替換為以下代碼。 App構造函數隻需将MainPage類設定為應用程式啟動時将顯示的頁面：

    點選(此處)折疊或打開

    1. using Xamarin.Forms;
    2. using Xamarin.Forms.Xaml;
    3. [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
    4. namespace Phoneword
    5. {
    6.     public partial class App : Application
    7.     {
    8.         public App()
    9.         {
    10.             InitializeComponent();
    11.             MainPage = new MainPage();
    12.         }
    13.         protected override void OnStart()
    14.         {
    15.             // Handle when your app starts
    16.         }
    17.         protected override void OnSleep()
    18.         {
    19.             // Handle when your app sleeps
    20.         }
    21.         protected override void OnResume()
    22.         {
    23.             // Handle when your app resumes
    24.         }
    25.     }
    26. }
    通過按CTRL+S将更改儲存到App.xaml.cs，并關閉檔案。
14. 在解決方案資料總管中，右鍵單擊Phoneword項目，然後選擇添加>建立項目...：

    

15. 在添加新項目對話框中，選擇Visual C＃>代碼>類，命名新檔案PhoneTranslator，然後單擊添加按鈕：

    

16. 在PhoneTranslator.cs中，删除所有的模闆代碼，并将其替換為以下代碼。 這段代碼将把手機字詞翻譯成電話号碼：

    點選(此處)折疊或打開

    1. using System.Text;
    2. namespace Core
    3. {
    4.     public static class PhonewordTranslator
    5.     {
    6.         public static string ToNumber(string raw)
    7.         {
    8.             if (string.IsNullOrWhiteSpace(raw))
    9.                 return null;
    10.             raw = raw.ToUpperInvariant();
    11.             var newNumber = new StringBuilder();
    12.             foreach (var c in raw)
    13.             {
    14.                 if (" -0123456789".Contains(c))
    15.                     newNumber.Append(c);
    16.                 else
    17.                 {
    18.                     var result = TranslateToNumber(c);
    19.                     if (result != null)
    20.                         newNumber.Append(result);
    21.                     // Bad character?
    22.                     else
    23.                         return null;
    24.                 }
    25.             }
    26.             return newNumber.ToString();
    27.         }
    28.         static bool Contains(this string keyString, char c)
    29.         {
    30.             return keyString.IndexOf(c) >= 0;
    31.         }
    32.         static readonly string[] digits = {
    33.             "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
    34.         };
    35.         static int? TranslateToNumber(char c)
    36.         {
    37.             for (int i = 0; i digits.Length; i++)
    38.             {
    39.                 if (digits[i].Contains(c))
    40.                     return 2 + i;
    41.             }
    42.             return null;
    43.         }
    44.     }
    45. }
    通過按CTRL+S将更改儲存到PhoneTranslator.cs，并關閉檔案。
17. In Solution Explorer, right click on the Phoneword project and select Add > New Item...:在解決方案資料總管中，右鍵單擊Phoneword項目，然後選擇添加>建立項...：

    

18. In the Add New Item dialog, select Visual C# > Code > Interface, name the new file IDialer, and click the Add button:在添加新項目對話框中，選擇Visual C＃>代碼>接口，命名新檔案IDialer，然後單擊添加按鈕：

    

19. 在IDialer.cs,中，删除所有的模闆代碼，并将其替換為以下代碼。 該代碼定義了一個撥号方式，必須在每個平台上實作撥号翻譯的電話号碼：

    點選(此處)折疊或打開

    1. namespace Phoneword
    2. {
    3.     public interface IDialer
    4.     {
    5.         bool Dial(string number);
    6.     }
    7. }
    通過按CTRL+S将更改儲存到IDialer.cs，并關閉檔案。

    該應用程式的通用代碼現已完成。 平台專用電話撥号器代碼現在将作為DependencyService實作。

20. 在解決方案資料總管中，右鍵單擊Phoneword.iOS項目，然後選擇添加>建立項...：

    

21. 在“添加新項目”對話框中，選擇“Apple”>“代碼”>“類”，為新的檔案名稱指定PhoneDialer，然後單擊“添加”按鈕：

    

22. 在PhoneDialer.cs中，删除所有的模闆代碼，并将其替換為以下代碼。 此代碼建立将在iOS平台上使用的撥号方式撥打已翻譯的電話号碼：

    點選(此處)折疊或打開

    1. using Foundation;
    2. using Phoneword.iOS;
    3. using UIKit;
    4. using Xamarin.Forms;
    5. [assembly: Dependency(typeof(PhoneDialer))]
    6. namespace Phoneword.iOS
    7. {
    8.     public class PhoneDialer : IDialer
    9.     {
    10.         public bool Dial(string number)
    11.         {
    12.             return UIApplication.SharedApplication.OpenUrl (
    13.                 new NSUrl ("tel:" + number));
    14.         }
    15.     }
    16. }
    通過按CTRL+S将更改儲存到PhoneDialer.cs，并關閉檔案。
23. 在解決方案資料總管中，右鍵單擊Phoneword.Android項目，然後選擇添加>建立項目...：

    

24. 在添加新項目對話框中，選擇Visual C＃> Android>類，命名新的檔案PhoneDialer，然後單擊添加按鈕：

    

25. 在PhoneDialer.cs中，删除所有的模闆代碼，并将其替換為以下代碼。 此代碼建立将在Android平台上使用的撥号方式撥打已翻譯的電話号碼：

    點選(此處)折疊或打開

    1. using Android.Content;
    2. using Android.Telephony;
    3. using Phoneword.Droid;
    4. using System.Linq;
    5. using Xamarin.Forms;
    6. using Uri = Android.Net.Uri;
    7. [assembly: Dependency(typeof(PhoneDialer))]
    8. namespace Phoneword.Droid
    9. {
    10.     public class PhoneDialer : IDialer
    11.     {
    12.         public bool Dial(string number)
    13.         {
    14.             var context = Forms.Context;
    15.             if (context == null)
    16.                 return false;
    17.             var intent = new Intent (Intent.ActionCall);
    18.             intent.SetData (Uri.Parse ("tel:" + number));
    19.             if (IsIntentAvailable (context, intent)) {
    20.                 context.StartActivity (intent);
    21.                 return true;
    22.             }
    23.             return false;
    24.         }
    25.         public static bool IsIntentAvailable(Context context, Intent intent)
    26.         {
    27.             var packageManager = context.PackageManager;
    28.             var list = packageManager.QueryIntentServices (intent, 0)
    29.                 .Union (packageManager.QueryIntentActivities (intent, 0));
    30.             if (list.Any ())
    31.                 return true;
    32.             var manager = TelephonyManager.FromContext (context);
    33.             return manager.PhoneType != PhoneType.None;
    34.         }
    35.     }
    36. }
    通過按CTRL+S将更改儲存到PhoneDialer.cs，并關閉檔案。
26. 在解決方案資料總管中，在Phoneword.Android項目中，輕按兩下屬性并選擇Android Manifest頁籤：

    

27. 在必需的權限部分，啟用CALL_PHONE權限。 這給予應用程式許可撥打電話：

    

    通過按CTRL+S将更改儲存到清單，并關閉檔案。
28. 在解決方案資料總管中，右鍵單擊Phoneword.UWP項目，然後選擇添加>建立項目...

    

29. 在“添加新項目”對話框中，選擇“Visual C＃>代碼”>“類”，命名新檔案PhoneDialer，然後單擊“添加”按鈕：

    

30. 在PhoneDialer.cs中，删除所有的模闆代碼，并将其替換為以下代碼。 此代碼建立将在通用Windows平台上使用的Dial方法和幫助方法來撥打已翻譯的電話号碼：

    點選(此處)折疊或打開

    1. using Phoneword.UWP;
    2. using System;
    3. using System.Threading.Tasks;
    4. using Windows.ApplicationModel.Calls;
    5. using Windows.UI.Popups;
    6. using Xamarin.Forms;
    7. [assembly: Dependency(typeof(PhoneDialer))]
    8. namespace Phoneword.UWP
    9. {
    10.     public class PhoneDialer : IDialer
    11.     {
    12.         bool dialled = false;
    13.         public bool Dial(string number)
    14.         {
    15.             DialNumber(number);
    16.             return dialled;
    17.         }
    18.         async Task DialNumber(string number)
    19.         {
    20.             var phoneLine = await GetDefaultPhoneLineAsync();
    21.             if (phoneLine != null)
    22.             {
    23.                 phoneLine.Dial(number, number);
    24.                 dialled = true;
    25.             }
    26.             else
    27.             {
    28.                 var dialog = new MessageDialog("No line found to place the call");
    29.                 await dialog.ShowAsync();
    30.                 dialled = false;
    31.             }
    32.         }
    33.         async TaskPhoneLine> GetDefaultPhoneLineAsync()
    34.         {
    35.             var phoneCallStore = await PhoneCallManager.RequestStoreAsync();
    36.             var lineId = await phoneCallStore.GetDefaultLineAsync();
    37.             return await PhoneLine.FromIdAsync(lineId);
    38.         }
    39.     }
    40. }
    通過按CTRL+S,将更改儲存到PhoneDialer.cs，并關閉檔案。
31. In Solution Explorer, in the Phoneword.UWP project, right-click References, and select Add Reference...:在解決方案資料總管中，在Phoneword.UWP項目中，右鍵單擊引用，然後選擇添加引用...：

    

32. 在“參考管理器”對話框中，選擇“通用Windows>擴充> Windows Mobile Extensions for UWP”，然後單擊“确定”按鈕：

    

33. 在解決方案資料總管中，在Phoneword.UWP項目中，輕按兩下Package.appxmanifest：

    

34. 在“功能”頁面中，啟用電話呼叫功能。 這給予應用程式許可撥打電話：

    

    通過按CTRL+S将更改儲存到清單，并關閉檔案。
35. 在Visual Studio中，選擇Build> Build Solution菜單項（或按CTRL + SHIFT + B）。 該應用程式将建構，一個成功的消息将出現在Visual Studio狀态欄中：

    

    如果有錯誤，請重複上述步驟并糾正任何錯誤，直到應用程式建構成功。
36. 在解決方案資料總管中，右鍵單擊Phoneword.UWP項目，然後選擇設定為啟動項目：

    

37. 在Visual Studio工具欄中，按開始按鈕（類似于播放按鈕的三角形按鈕）啟動應用程式：

    

    

38. 在解決方案資料總管中，右鍵單擊Phoneword.Android項目，然後選擇設定為啟動項目。
39. 在Visual Studio工具欄中，按開始按鈕（類似于播放按鈕的三角形按鈕）在Android模拟器中啟動應用程式。
40. 如果您有iOS裝置并滿足Xamarin.Forms開發的Mac系統要求，請使用類似的技術将應用程式部署到iOS裝置。 注意：所有模拟器都不支援電話。

祝賀您完成Xamarin.Forms應用程式。 本指南中的下一個主題将回顧本演練中采取的步驟，以了解使用Xamarin.Forms的應用程式開發的基礎知識。