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

   点击(此处)折叠或打开

   1. ?xml version="1.0" encoding="UTF-8"?>
      
   2. ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      
   3.                    xmlns:local="clr-namespace:Phoneword;assembly=Phoneword"
      
   4.                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      
   5.                    x:Class="Phoneword.CallHistoryPage"
      
   6.                    Title="Call History">
      
   7.     ContentPage.Padding>
      
   8.         OnPlatform x:TypeArguments="Thickness">
      
   9.             On Platform="iOS" Value="20, 40, 20, 20" />
      
   10.             On Platform="Android, WinPhone, Windows" Value="20" />
       
   11.         /OnPlatform>
       
   12.     /ContentPage.Padding>
       
   13.     StackLayout>
       
   14.       ListView ItemsSource="{x:Static local:App.PhoneNumbers}" />
       
   15.     /StackLayout>
       
   16. /ContentPage>

   
   

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

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

   

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

   点击(此处)折叠或打开

   1. using System.Collections.Generic;
      
   2. using Xamarin.Forms;
      
   3. using Xamarin.Forms.Xaml;
      
   4. 
      
   5. [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
      
   6. namespace Phoneword
      
   7. {
      
   8.     public partial class App : Application
      
   9.     {
      
   10.         public static IListstring> PhoneNumbers { get; set; }
       
   11. 
       
   12.         public App()
       
   13.         {
       
   14.             InitializeComponent();
       
   15.             PhoneNumbers = new Liststring>();
       
   16.             MainPage = new NavigationPage(new MainPage());
       
   17.         }
       
   18.         ...
       
   19.     }
       
   20. }

   
   

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

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

   

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

   点击(此处)折叠或打开

   1. StackLayout VerticalOptions="FillAndExpand"
      
   2.              HorizontalOptions="FillAndExpand"
      
   3.              Orientation="Vertical"
      
   4.              Spacing="15">
      
   5.   ...
      
   6.   Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
      
   7.   Button x:Name="callHistoryButton" Text="Call History" IsEnabled="false"
      
   8.           Clicked="OnCallHistory" />
      
   9. /StackLayout>

   
   

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

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

    

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

    点击(此处)折叠或打开

    1. using System;
       
    2. using Xamarin.Forms;
       
    3. 
       
    4. namespace Phoneword
       
    5. {
       
    6.     public partial class MainPage : ContentPage
       
    7.     {
       
    8.         ...
       
    9. 
       
    10.         async void OnCall(object sender, EventArgs e)
        
    11.         {
        
    12.             ...
        
    13.             if (dialer != null) {
        
    14.                 App.PhoneNumbers.Add (translatedNumber);
        
    15.                 callHistoryButton.IsEnabled = true;
        
    16.                 dialer.Dial (translatedNumber);
        
    17.             }
        
    18.             ...
        
    19.         }
        
    20. 
        
    21.         async void OnCallHistory(object sender, EventArgs e)
        
    22.         {
        
    23.             await Navigation.PushAsync (new CallHistoryPage ());
        
    24.         }
        
    25.     }
        
    26. }

    
    

    通过按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的数据绑定。