Xamarin.Forms多画面快速入门

该快速入门演示了如何通过添加第二个屏幕来扩展Phoneword应用程序来跟踪应用程序的通话记录。 最终的应用如下所示：

扩展Phoneword应用程序如下：

1. 在“开始”屏幕中，启动Visual Studio。 这将打开起始页：

   

2. 在Visual Studio中，单击打开项目...，并在打开项目对话框中选择Phoneword项目的解决方案文件。 或者从最近的项目列表中打开该项目：

   

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

   

4. 在Add New Item对话框中，选择Visual C＃> Cross-Platform> Forms Xaml Page，命名新的文件CallHistoryPage，然后单击Add按钮。 这将为项目添加一个名为CallHistoryPage的页面：

   

5. 在CallHistoryPage.xaml中，删除所有的模板代码，并将其替换为以下代码。 该代码声明性地定义了页面的用户界面：

   <?xml version="1.0" encoding="UTF-8"?>
   <ContentPage xmlns=""
                      xmlns:local="clr-namespace:Phoneword;assembly=Phoneword"
                      xmlns:x=""
                      x:Class="Phoneword.CallHistoryPage"
                      Title="Call History">
       <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>
         <ListView ItemsSource="{x:Static local:App.PhoneNumbers}" />
       </StackLayout>
   </ContentPage>

   
   

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

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

   

7. 在App.xaml.cs中，导入System.Collections.Generic命名空间，添加PhoneNumbers属性的声明，初始化App构造函数中的属性，并将MainPage属性初始化为NavigationPage。 PhoneNumbers系列将用于存储应用程序调用的每个翻译的电话号码列表：

   using System.Collections.Generic;
   using Xamarin.Forms;
   using Xamarin.Forms.Xaml;
   
   [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
   namespace Phoneword
   {
       public partial class App : Application
       {
           public static IList<string> PhoneNumbers { get; set; }
   
           public App()
           {
               InitializeComponent();
               PhoneNumbers = new List<string>();
               MainPage = new NavigationPage(new MainPage());
           }
           ...
       }
   }

   
   

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

8. 在解决方案资源管理器中，双击MainPage.xaml打开它：

   

9. 在MainPage.xaml中，在StackLayout控件的末尾添加一个Button控件。 该按钮将用于导航到通话记录页面：

   <StackLayout VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                Orientation="Vertical"
                Spacing="15">
     ...
     <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
     <Button x:Name="callHistoryButton" Text="Call History" IsEnabled="false"
             Clicked="OnCallHistory" />
   </StackLayout>

   
   

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

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

    

11. 在MainPage.xaml.cs中，添加OnCallHistory事件处理程序方法，并修改OnCall事件处理程序方法，将已翻译的电话号码添加到App.PhoneNumbers集合，并启用callHistoryButton，前提是dialer变量不为空：

    using System;
    using Xamarin.Forms;
    
    namespace Phoneword
    {
        public partial class MainPage : ContentPage
        {
            ...
    
            async void OnCall(object sender, EventArgs e)
            {
                ...
                if (dialer != null) {
                    App.PhoneNumbers.Add (translatedNumber);
                    callHistoryButton.IsEnabled = true;
                    dialer.Dial (translatedNumber);
                }
                ...
            }
    
            async void OnCallHistory(object sender, EventArgs e)
            {
                await Navigation.PushAsync (new CallHistoryPage ());
            }
        }
    }

    
    

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

12. 在Visual Studio中，选择Build> Build Solution菜单项（或按CTRL + SHIFT + B）。 该应用程序将生成，一个成功的消息将出现在Visual Studio状态栏中：

    

    如果有错误，请重复上述步骤并纠正任何错误，直到应用程序构建成功。

13. 在解决方案资源管理器中，右键单击Phoneword.UWP项目，然后选择设置为启动项目：

    

14. 在Visual Studio工具栏中，按开始按钮（类似于播放按钮的三角形按钮）启动应用程序：

    

15. 在解决方案资源管理器中，右键单击Phoneword.Droid项目，然后选择设置为启动项目。

16. 在Visual Studio工具栏中，按开始按钮（类似于播放按钮的三角形按钮）在Android模拟器中启动应用程序。

17. 如果您有iOS设备并满足Xamarin.Forms开发的Mac系统要求，请使用类似的技术将应用程序部署到iOS设备。

    注意：所有模拟器都不支持电话。

恭喜您完成了多屏Xamarin.Forms应用程序。 本指南中的下一个主题将回顾本演练中采取的步骤，以便了解页面导航和使用Xamarin.Forms的数据绑定。