介绍

在 Android 编程中,活动对象用于向用户显示信息,而”意图”对象用于在活动之间导航。在 Xamarin.Forms 中,我们将熟悉与活动类似的页面和类似于意向对象的导航页面对象。

页面

在前面的帖子中,我们浏览了Xamarin中布局和视图的基础知识。在现实世界中,移动应用程序由多个页面组成。

Xamarin.Forms 提供了许多页面对象,我们可用于设置应用程序的 UI,并且所有这些对象都派生自 abto Page类。下表描述了 Xamarin.Forms 中的可用页面:

页面类型

描述

内容页面

显示单个视图对象

选项卡页

使用选项卡在子页面之间促进导航

轮播页

在子页面之间使用轻扫手势以方便使用

母版详细信息页面

管理两个单独的窗格,其中包括一个弹出窗口控件

导航页

提供用于在页面之间导航的基础结构

我们可以通过三种方式创建页面对象:

  • 使用 XAML
  • 使用 C# 代码
  • 使用项目模板由可视化工作室提供

为了遵循本文中的示例,我们还创建了一个新的Xamarin.Forms应用程序,名为NavigApp

内容页

ContentPage是最简单的页面对象,允许显示单个可视元素(或上一篇文章中的控件)。默认情况下,当我们成功创建NavigApp应用程序时,MainPage.xaml 文件的内容可以如下所示:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NavigApp"
             x:Class="NavigApp.MainPage">
       <Label Text="Welcome to Xamarin.Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />
</ContentPage>

在上面的 XAML 代码中,可以使用<ContentPage>元素及其属性创建ContentPage对象。此ContentPage对象显示单个可视元素”标签”元素。代码落后文件 (MainPage.xaml.cs):

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

我们还可以使用项目模板创建ContentPage:

  • 右键单击解决方案资源管理器窗口中的NavigApp项目,然后选择”添加>新项目…

Image title

  • 接下来,选择选项并在”添加新项目”对话框中填写内容,作为以下屏幕截图:

Image title请注意,我们可以选择内容页项(XAML 模板)或内容页 (C#)项 (C#)项,即 C# 代码模板。内容页面可以单独使用,也可以用作其他页面的内容(稍后将看到)。

母版详细信息页面

MasterDetailPage允许我们将内容拆分为两个相关部分:显示项的主部件和显示主部件上项目详细信息的明细部分。以下 XAML代码(MainPage.xaml文件)将演示如何创建母版详细信息页面对象,其主控部分和详细信息部分均由 ContentPage 对象表示:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NavigApp"
             x:Class="NavigApp.MainPage" >
    <MasterDetailPage.Master>
        <ContentPage Title="Content Page">
            <Label Text="This is the Master" HorizontalOptions="Center"
                VerticalOptions="Center"/>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage>
            <Label Text="This is the Details" HorizontalOptions="Center"
                VerticalOptions="Center"/>
         </ContentPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

请注意,我们必须插入<Master 详细信息页面的 Title属性。”主控”> 是<ContentPage>元素。代码隐藏文件的内容 (MainPage.xaml.cs )将如下所示:

namespace NavigApp
{
       public partial class MainPage : MasterDetailPage
    {
              public  MainPage()
              {
                     InitializeComponent();                     
              }
       }
}

结果:

Image title

您可以从左侧轻扫以启用主弹出窗口:

Image title

并刷回隐藏它。来自 Microsoft 文档的重要说明:

“母版详细信息页的母版页应始终是 ContentPage 实例,并且详细信息页应仅填充 TabbedPage、导航页和内容页实例。这将有助于确保跨所有平台的一致用户体验。

您还可以通过从VisualStudio添加项目模板来添加母版详细信息页面对象:

Image title

选项卡页

TabbedPage 对象用于需要按主题或活动类型对多个页面进行分类的情况。您可以将多个 ContentPage 对象分组到选项卡中,作为以下 XAML 代码 (MainPage.xaml):

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NavigApp"
             x:Class="NavigApp

儿童>
<内容页标题=”第一个”>
<标签文本=”这是第一页”水平选项””中心”垂直选项=”中心”/>
</内容页面>
<内容页标题=”秒”>
<标签文本=”这是第二页”水平选项””中心”垂直选项=”中心”/>
</内容页面>
<内容页标题=”第三”>
<标签文本=”这是第三页”水平选项”=”中心”垂直选项=”中心”/>
</内容页面>
</TabbedPage.儿童>
</TabbedPage>

代码后面(MainPage.xaml.cs)可有可有:

namespace NavigApp
{
       public partial class MainPage : TabbedPage
    {
              public  MainPage()
              {
                     InitializeComponent();                     
        }
       }
}

结果如下所示:

Image title

Image title

Image title

如您所见,我们将多个 ContentPage 对象组织到 TabbedPage.子集合中,我们还必须为每个 ContentPage 提供一个标题(即每个选项卡的标题)。

我们还可以通过从 Visual Studio 添加项目模板来添加 TabbedPage 对象:

Image title

转盘页

轮播页类似于TabbedPage,但我们可以使用轻扫手势在子页面之间切换,而不是具有选项卡。以下 XAML 代码将使用轮播页演示图片库:

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NavigApp"
             x:Class="NavigApp.MainPage" >
    <CarouselPage.Children>
        <ContentPage Title="First">
            <Image Source="cat.jpg" HorizontalOptions="Center" VerticalOptions="Center"/>
        </ContentPage>
        <ContentPage Title="Second">
            <Image Source="dog.jpg" HorizontalOptions="Center" VerticalOptions="Center"/>
        </ContentPage>
        <ContentPage Title="Third">
            <Image Source="mouse.jpg" HorizontalOptions="Center" VerticalOptions="Center"/>
        </ContentPage>
    </CarouselPage.Children>
</CarouselPage>

和代码后面,分别:

namespace NavigApp
{
       public partial class MainPage : CarouselPage
    {
              public  MainPage()
              {
             InitializeComponent();
        }
       }
}

结果:

Image title

轻扫至第二页:

Image title

第三页:

Image title

请注意,我们必须将图片导入 Android 项目中的”资源>可绘制”文件夹:

Image title在页面之间导航

理论上,要从一个页面移动到另一个页面,应用程序会将新页面推送到导航堆栈,该页面将成为活动页,并返回到上一页,应用程序将从导航堆栈中弹出当前页面。我们可以在导航过程中将数据从页面传递到另一个页面。

实际上,导航包括以下运算符:

  • 创建根页(即第一页)通过使用navigationPage对象添加到导航堆栈中,App.xaml.cs文件中。
  • 通过将此页面推送到导航堆栈,导航到下一页。我们可以在当前页面的导航属性上使用PushAsyncPushModalAsync等方法。
  • 默认情况下,我们可以使用设备上的”后退”按钮将导航回上一页,但我们可以通过使用导航属性上的PopAsyncPopModalAsync进行编程,以便从导航堆栈中弹出活动页面。
  • 在浏览页面构造函数或BindingContext时传递数据。

在我们的NavigApp应用程序中,假设 NagvigApp 应用程序具有 MainPage.xaml,如下所示:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NavigApp"
             x:Class="NavigApp.MainPage"
             Title="Main Page">
    <StackLayout>
    <Label Text="I am Main Page" HorizontalOptions="Center"
VerticalOptions="Center"/>
        <Button Text="Next Page" HorizontalOptions="Center" VerticalOptions="Center"
Clicked="nextPage"/>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs:

namespace NavigApp
{
       public partial class MainPage : ContentPage
    {
       public  MainPage()
       {
             InitializeComponent();                            
        }
        private void nextPage(object sender, EventArgs e)
        {
        }
    }
}

下一个页面方法是单击下一页的事件处理程序。如果运行NavigApp,则结果如下所示:

Image title

我们可以将 MainPage 推送到导航堆栈,否则 MainPage 将成为根页,通过修改App.xaml.cs文件中应用类的构造函数应用:

Image title

namespace NavigApp
{
       public partial class App : Application
       {
              public App ()
              {
                     InitializeComponent();
                     //MainPage = new NavigApp.MainPage();
                     MainPage = new NavigationPage(new MainPage());
              }
...
}

如果现在运行该应用程序,结果将如下所示:

Image title

显示标题的主页页面顶部有一个导航栏。接下来,我们将向项目添加名为”第二页”的第二页:

Image title第二页.xaml:

<?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="NavigApp.SecondPage"
             Title="Second Page">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to second page!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
            <Button Text="Previous Page"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand"
                    Clicked="prevPage"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

SecondPage.xaml.cs:

namespace NavigApp
{
       [XamlCompilation(XamlCompilationOptions.Compile)]
       public partial class SecondPage : ContentPage
       {
              public SecondPage ()
              {
                     InitializeComponent ();
              }
              private void prevPage(object sender, EventArgs e)
              {
              }
       }
}

要通过单击”下一页”按钮从主页页面移动到第二页页面,我们必须将第二页页面推送到导航堆栈。在下一个Page方法中,我们写一些东西:

async private void nextPage(object sender, EventArgs e)
     {
         await Navigation.PushAsync(new SecondPage());
     }

请注意,我们必须将异步关键字添加到下一个Page方法的声明。现在,我们可以再次运行应用程序,然后单击”下一页”按钮,应用程序将导航到第二页页面:

Image title

我们可以通过单击”后退”按钮导航回主页页面,但是,您可以通过对前vPage方法(即”前一页”按钮的Click事件处理程序)进行一些更改来执行此操作:

async private void prevPage(object sender, EventArgs e)
   {
            await Navigation.PopAsync();
   }

导航时,我们可以通过页面构造函数参数将数据传递到 MainPage 页面,该参数显示以下更改:

  • 在 App() 构造函数中:向导航页构造函数添加参数
public App ()
{
    InitializeComponent();
MainPage = new NavigationPage(new MainPage("Minh"));
}
  • 在 MainPage.xaml 中:添加x:Name属性并修改标签中的Text属性
  • <ContentPage ...>
        <StackLayout>
            <Label x:Name="name" Text="I am " HorizontalOptions="Center" 
                   VerticalOptions="Center"/>
            <Button .../>
        </StackLayout>
    </ContentPage>
    • 在MainPage.xaml.cs:向 MainPage 构造函数添加一些代码:
    public  MainPage(string name)
           {
                InitializeComponent();
                var lbName = this.FindByName<Label>("name");
                lbName.Text += name;    
            }

    结果:

    Image title

    我们还可以通过BindingContext将数据传递到 MainPage 页面,这将在下一篇文章中发现。

    结论

    在本文中,我介绍了 Xamarin 中的页面和导航我还介绍了如何使用 page 构造函数参数导航时传递数据。你可以通过查看微软文档来了解有关所有这些文档的更多情况。

    Comments are closed.