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中，删除所有的模板代码，并将其替换为以下代码。 该代码声明性地定义了页面的用户界面：
   

   <?xml version="1.0" encoding="UTF-8"?>
   <ContentPage xmlns=""
                      xmlns:x=""
                      x:Class="Phoneword.MainPage">
       <ContentPage.Padding>
           <OnPlatform x:TypeArguments="Thickness">
               <On Platform="iOS" Value="20, 40, 20, 20" />
               <On Platform="Android, WinPhone, Windows" Value="20" />
           </OnPlatform>
       </ContentPage.Padding>
       <StackLayout>
         <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>

   
   

   
   

   通过按CTRL+S将更改保存到MainPage.xaml，然后关闭文件。

10. 在解决方案资源管理器中，展开MainPage.xaml并双击MainPage.xaml.cs将其打开：

    

11. 在MainPage.xaml.cs中，删除所有模板代码，并将其替换为以下代码。 OnTranslate和OnCall方法将分别在用户界面中单击Translate和Call按钮时执行：
    

    using System;
    using Xamarin.Forms;
    
    namespace Phoneword
    {
        public partial class MainPage : ContentPage
        {
            string translatedNumber;
    
            public MainPage ()
            {
                InitializeComponent ();
            }
    
            void OnTranslate (object sender, EventArgs e)
            {
                translatedNumber = Core.PhonewordTranslator.ToNumber (phoneNumberText.Text);
                if (!string.IsNullOrWhiteSpace (translatedNumber)) {
                    callButton.IsEnabled = true;
                    callButton.Text = "Call " + translatedNumber;
                } else {
                    callButton.IsEnabled = false;
                    callButton.Text = "Call";
                }
            }
    
            async void OnCall (object sender, EventArgs e)
            {
                if (await this.DisplayAlert (
                        "Dial a Number",
                        "Would you like to call " + translatedNumber + "?",
                        "Yes",
                        "No")) {
                    var dialer = DependencyService.Get<IDialer> ();
                    if (dialer != null)
                        dialer.Dial (translatedNumber);
                }
            }
        }
    }

    
    

    
    

    注意：此时尝试构建应用程序将导致稍后修复的错误。

    通过按CTRL+S将更改保存到MainPage.xaml.cs，然后关闭文件。

12. 在解决方案资源管理器中，展开App.xaml并双击App.xaml.cs打开它：

    

13. 在App.xaml.cs中，删除所有的模板代码，并将其替换为以下代码。 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将更改保存到App.xaml.cs，并关闭文件。

    
    

14. 在解决方案资源管理器中，右键单击Phoneword项目，然后选择添加>新建项目...：

    

15. 在添加新项目对话框中，选择Visual C＃>代码>类，命名新文件PhoneTranslator，然后单击添加按钮：

    

16. 在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;
            }
        }
    }

    
    

    
    

    通过按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,中，删除所有的模板代码，并将其替换为以下代码。 该代码定义了一个拨号方式，必须在每个平台上实现拨号翻译的电话号码：
    

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

    
    通过按CTRL+S将更改保存到IDialer.cs，并关闭文件。

    
    

    该应用程序的通用代码现已完成。 平台专用电话拨号器代码现在将作为DependencyService实现。

20. 在解决方案资源管理器中，右键单击Phoneword.iOS项目，然后选择添加>新建项...：

    

21. 在“添加新项目”对话框中，选择“Apple”>“代码”>“类”，为新的文件名称指定PhoneDialer，然后单击“添加”按钮：

    

22. 在PhoneDialer.cs中，删除所有的模板代码，并将其替换为以下代码。 此代码创建将在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));
            }
        }
    }

    
    

    
    

    通过按CTRL+S将更改保存到PhoneDialer.cs，并关闭文件。

23. 在解决方案资源管理器中，右键单击Phoneword.Android项目，然后选择添加>新建项目...：

    

24. 在添加新项目对话框中，选择Visual C＃> Android>类，命名新的文件PhoneDialer，然后单击添加按钮：

    

25. 在PhoneDialer.cs中，删除所有的模板代码，并将其替换为以下代码。 此代码创建将在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;
            }
        }
    }

    
    

    
    

    通过按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方法和帮助方法来拨打已翻译的电话号码：
    

    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 Task 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);
            }
        }
    }

    
    

    
    

    通过按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的应用程序开发的基础知识。