使用 Xamarin.Forms 在 Visual Studio 中实现页面导航

一、介绍

Xamarin 是一个开发跨平台应用程序的框架，支持多种平台，如 Windows 手机、Android 和 iOS。它使用代码共享的概念来简化跨平台应用的开发，使得开发者可以使用单一代码库来实现多个平台的应用。在 Xamarin Studio 和 Visual Studio 中，都可以使用 Xamarin 进行开发。

二、先决条件

要在 Xamarin.Forms 中实现页面导航，您需要：

• Visual Studio 2017 RC：确保您的开发环境已经安装了 Visual Studio 2017 RC 版本。

三、创建新项目

1. 步骤 1

在 Visual Studio 中，点击 File 菜单，然后选择 New 和 Project。此时，您会看到所有类型的项目列表。在打开的窗口中，您可以点击 Project 选项，或者直接使用快捷键 Ctrl+Shift+N 来新建项目。

2. 步骤 2

在 New Project 对话框中，选择左侧的 Installed 选项卡，然后导航到 Templates --> Visual C# --> Cross-Platform。在这里，选择 Cross-Platform App 模板。接下来，输入您的应用名称（例如：sample），并指定项目的保存路径。点击 OK 以创建项目。

3. 步骤 3

在接下来的对话框中，选择 Blank App 选项，并确保选择 **Forms PCL (sharing)**。这将创建一个空白的 Xamarin.Forms 应用程序项目，并启用代码共享功能。点击 OK 确认选择。

四、配置项目

1. 步骤 4

在 Solution Explorer 中，您可以查看项目中的所有文件和源代码。为了支持 Universal Windows Platform (UWP)，您需要添加 UWP 相关的引用。前往 Solution Explorer --> Your Project --> UWP --> References，右键单击 References，然后选择 Add Reference。

2. 步骤 5

在 Reference Manager 中，选择 Universal Windows，并勾选 Extensions 选项。确保选择以下两个版本：

• 适用于 UWP 的 Windows 桌面扩展，版本：10.0.1439
• 适用于 UWP 的 Windows 桌面扩展，版本：10.0.1058

点击 OK 以添加这些引用。

五、添加页面

1. 步骤 6

添加一个新的页面，命名为 MainPage.xaml。在 Solution Explorer 中，导航到 Your Project --> Portable，右键单击 Portable 文件夹，选择 Add，然后选择 New Item（快捷键：Ctrl+Shift+A）。

2. 步骤 7

在 Add New Item 对话框中，选择 Forms XAML Page 模板，并将文件命名为 MainPage.xaml。点击 Add 完成创建。

3. 步骤 8

添加另一个页面，命名为 SecondPage.xaml。重复步骤 6 的操作，只是这次命名为 SecondPage.xaml。

4. 步骤 9

在 Solution Explorer 中，为 SecondPage.xaml 添加页面。在 Solution Explorer 中选择 Your Project --> Portable 文件夹，右键单击 Portable 文件夹，选择 Add，然后选择 New Item（快捷键：Ctrl+Shift+A）。选择 Forms XAML Page 模板，并将文件命名为 SecondPage.xaml。点击 Add 以创建第二个页面。

六、编写页面代码

1. 步骤 10

在 MainPage.xaml 页面中编写如下代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PageNavigation.MainPage"
             Title="MainPage">
    <StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
        
        <Button Text="Second Page" BackgroundColor="Blue" Clicked="NavigateButton_OnClicked"/>
    StackLayout>
ContentPage>

代码说明：

• xmlns 和 xmlns:x 用于定义 XML 命名空间。
• x:Class 指定了绑定到该页面的 C# 类。
• Title 设置页面的标题。
• StackLayout 是一个布局控件，用于垂直排列子控件。
• Button 是一个按钮控件，点击时会触发 NavigateButton_OnClicked 方法。

2. 步骤 11

在 SecondPage.xaml 页面中编写如下代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PageNavigation.SecondPage"
             Title="Second Page">
    <StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
        
        <Button Text="Main Page" BackgroundColor="Blue" Clicked="NavigateButton_OnClicked"/>
    StackLayout>
ContentPage>

代码说明：

• 与 MainPage.xaml 相同，但按钮文本为 "Main Page"，点击后将触发导航回主页。

七、实现导航功能

1. 步骤 12

在 MainPage.xaml.cs 页面中创建 NavigateButton_OnClicked 方法，代码如下：

using Xamarin.Forms;

namespace PageNavigation
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // 点击按钮后导航到 SecondPage
        private async void NavigateButton_OnClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage());
        }
    }
}

代码说明：

• using Xamarin.Forms; 引入 Xamarin.Forms 命名空间。
• MainPage 类继承自 ContentPage。
• InitializeComponent() 初始化页面组件。
• NavigateButton_OnClicked 方法处理按钮点击事件，通过 Navigation.PushAsync 方法导航到 SecondPage。

2. 步骤 13

在 SecondPage.xaml.cs 页面中创建 NavigateButton_OnClicked 方法，代码如下：

using Xamarin.Forms;

namespace PageNavigation
{
    public partial class SecondPage : ContentPage
    {
        public SecondPage()
        {
            InitializeComponent();
        }

        // 点击按钮后导航回 MainPage
        private async void NavigateButton_OnClicked(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }
    }
}

代码说明：

• NavigateButton_OnClicked 方法处理按钮点击事件，通过 Navigation.PopAsync 方法返回到之前的页面，即 MainPage。

3. 步骤 14

在 App.xaml.cs 页面中设置应用的主页面，代码如下：

using Xamarin.Forms;

namespace PageNavigation
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            // 设置主页面为导航页面，初始页面为 MainPage
            MainPage = new NavigationPage(new MainPage());
        }
    }
}

代码说明：

• MainPage = new NavigationPage(new MainPage()); 设置应用的主页面为 NavigationPage，并指定初始页面为 MainPage。NavigationPage 允许在页面之间进行导航。

八、运行应用

1. 步骤 15

现在，您可以运行应用程序。在 Visual Studio 中，前往 Debug Configuration Manager。选择适当的平台，并确保勾选 Build 和 Deploy 选项。点击 Close 以保存配置。

2. 步骤 16

如果您安装了 Windows 10 模拟器，可以运行它来测试应用。如果没有安装模拟器，您可以直接在本地计算机上运行应用程序。

九、输出

在应用程序启动后，您将看到主页面（MainPage）。点击 Second Page 按钮，应用程序将导航到 SecondPage 页面。点击 Main Page 按钮，应用程序将返回到主页面（MainPage）。

现在，您将成功看到第二页。单击“主页”按钮。您将看到主页。

十、总结

以上步骤展示了如何在 Xamarin.Forms 中使用 Visual Studio 实现页面间的导航。通过设置 NavigationPage 和处理按钮点击事件，您可以轻松实现页面的跳转和返回操作。这种导航机制对于创建复杂的应用程序结构非常有用。