Xamarin.Forms 多页面显示快速入门

最新推荐文章于 2024-07-26 00:38:35 发布

xpHoloAI

最新推荐文章于 2024-07-26 00:38:35 发布

阅读量2.2k

点赞数

Xamarin 同时被 3 个专栏收录

73 篇文章 4 订阅

订阅专栏

xamarin.forms

73 篇文章 6 订阅

订阅专栏

Xamarin.Forms 跨平台新势力

73 篇文章 43 订阅

订阅专栏

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

扩展 Phoneword 应用程序，如下所示：

在“开始”屏幕中，启动 Visual Studio。这会打开起始页：
在 Visual Studio 中，单击“打开项目…”，然后在“打开项目”对话框中选择 Phoneword 项目的解决方案文件。或者，从“最近”项目列表打开项目：
在“解决方案资源管理器”中，右键单击“Phoneword”项目，然后选择“添加”>“新建项...”：
在“添加新项”对话框中，选择“Visual C#”>“跨平台”>“Forms Xaml 页面”，将新文件命名为“CallHistoryPage”，然后单击“添加”按钮。这会将一个名为 CallHistoryPage 的页面添加到项目：

在 CallHistoryPage.xaml 中，删除所有模板代码并将其替换为以下代码。此代码以声明方式定义页面上的用户界面：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:local="clr-namespace:Phoneword;assembly=Phoneword"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Phoneword.CallHistoryPage">
    <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">
            <ListView ItemsSource="{x:Static local:App.PhoneNumbers}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

通过按 Ctrl+S，保存对 CallHistoryPage.xaml 所做的更改，然后关闭文件。

在“解决方案资源管理器”中，双击 App.xaml.cs 将其打开：

在 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 所做的更改，然后关闭文件。

在“解决方案资源管理器”中，双击 MainPage.xaml 将其打开：

在 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 所做的更改，然后关闭文件。

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

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

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 所做的更改，然后关闭文件。

在 Visual Studio 中，选择“生成”>“生成解决方案”菜单项，或按 Ctrl+Shift+B。将生成应用程序，Visual Studio 状态栏中将显示一条成功消息：

如果发生错误，请重复前面的步骤并更正任何错误，直到成功生成应用程序。
在“解决方案资源管理器”中，右键单击“Phoneword.UWP”项目，然后选择“设为启用项目”：
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动应用程序：
在“解决方案资源管理器”中，右键单击“Phoneword.Droid”项目，然后选择“设为启用项目”。
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动 Android 模拟器内的应用程序。
如果拥有 iOS 设备并符合 Xamarin.Forms 开发的 Mac 系统要求，请使用类似技术将应用部署到 iOS 设备。

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