使用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.去掉这个文件中的所有代码，并替换成下面的内容。

 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保存它，然后关闭。

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) >= ;

        }

        static readonly string[] digits = {

            "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"

        };

        static int? TranslateToNumber(char c)

        {

            for (int i = ; i < digits.Length; i++)

            {

                if (digits[i].Contains(c))

                    return  + 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, )

                .Union (packageManager.QueryIntentActivities (intent, ));

            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 应用！

巴特西

使用Xamarin.Forms跨平台开发入门 Hello,Xamarin.Forms 第一部分快速入门

最新文章

热门文章

巴特西

使用Xamarin.Forms跨平台开发入门 Hello,Xamarin.Forms 第一部分 快速入门

最新文章

热门文章

使用Xamarin.Forms跨平台开发入门 Hello,Xamarin.Forms 第一部分快速入门