文章
文章用户教程圈子网址导航
ruanzhu

使用选项卡和浮出控件导航创建多页 .NET MAUI 应用

内容纲要

介绍

规划应用的体系结构的一部分是决定用户如何在页面之间移动。用户是否需要在一系列页面中前进和后退？你的应用是否有一个起始页，或者是否有多个同等重要的顶级页？你选择的导航必须与应用的内容很好地配合使用。它也应该适合您定位的每个平台。

假设你正在使用 .NET MAUI 为天文馆编写应用。您希望通过呈现与日常生活相关的天文事实和概念来激发对天文学的兴趣。该应用程序将具有涵盖日出和日落，月相，天体和“关于”页面的页面。您的工作是为这些页面设计和实现直观的导航模式。

在本模块中，你将了解如何使用选项卡式页面实现在多个页面上显示数据的应用。您将看到此导航模式何时合适，以及如何自定义选项卡式页面的行为。您还将了解如何将选项卡式页面与使用导航堆栈的导航页面组合在一起。

学习目标

在本模块中，您将学习如何：

  • 使用 .NET MAUI Shell 实现浮出控件导航
  • 使用 .NET MAUI Shell 实现选项卡导航
  • 在选项卡式页面中的页面之间导航

先决条件

  • 安装了 .NET MAUI 工作负载的 Visual Studio 2022
  • 熟悉 C# 和 .NET

实现浮出控件导航

浮出控件导航是一种导航类型，其中菜单项窗口从设备屏幕的一侧滑动（或飞出）。它通常通过点击所谓的“汉堡包”菜单或具有三条水平线堆叠在一起的图标来调用。

在本单元中，你将了解如何生成实现浮出控件导航的应用。

什么是浮出控件导航？

浮出控件导航显示一个菜单，该菜单提供了在应用程序中切换上下文的快速方法。

浮出控件菜单由几个部分组成：、、、 和 。HeaderFlyoutItemsMenuItemsFooter

下图显示了浮出控件部件的可视示例。

由于浮出控件菜单并不总是可见的，因此它可用于在应用程序的概念上不同的部分之间切换上下文。例如，一个浮出控件项可以指向一个或多个数据输入页，而另一个浮出控件项可以指向“关于”页。

.NET MAUI 应用中的浮出控件导航

您可以使用该类在 .NET MAUI 中实现浮出控件导航。 是 .NET MAUI 提供的 Shell 应用开发范例的一部分。FlyoutItemFlyoutItem

在 .NET MAUI 中使用浮出控件进行导航时，将点击某个项。将自动切换应用中显示的内容。您可以通过设置其属性来指定在点击 时显示的内容。该属性将指向应用程序中的某个页。FlyoutItemFlyoutItemFlyoutItemShellContent

需要托管在页面中，该页面用作应用程序的主页。您可以拥有任意数量的 s。FlyoutItemShellFlyoutItem

下面的示例创建一个包含两个浮出控件项的浮出控件：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

创建浮出控件

可以将一个或多个浮出控件项添加到浮出控件中，并且每个浮出控件项由一个对象表示。每个对象都应该是用作应用的 子类化对象的子对象。FlyoutItemFlyoutItemShellMainPage

该对象具有隐式转换运算符，可以简化 Shell 视觉对象层次结构。这是可能的，因为子类化对象只能包含对象或对象，对象只能包含对象，只能包含对象。ShellShellFlyoutItemTabBarTabShellContent

这些隐式转换运算符可用于删除上一示例中的 和 对象：FlyoutItemTab

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

此代码将导致包含两个项目的浮出控件。默认情况下，将在应用程序打开时显示 。点击第二个将显示 .CatsPageDogsPage

浮出控件菜单项

可以选择将菜单项添加到浮出控件中，并且每个菜单项都由一个对象表示。菜单项类似于按钮，因为点击一个菜单项会导致发生操作，而不是显示页面。MenuItem

对象在浮出控件上的位置取决于它们在 Shell 视觉对象层次结构中的声明顺序。因此，在对象之前声明的任何对象将显示在浮出控件中的对象之前，在对象之后声明的任何对象将显示在浮出控件中的对象之后。MenuItemMenuItemFlyoutItemFlyoutItemMenuItemFlyoutItemFlyoutItem

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

浮出控件标头是可以选择显示在浮出控件顶部的内容，其外观由可使用 Shell.FlyoutHeader 可绑定属性设置的对象定义：

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png">
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

浮出控件页脚是可以选择显示在浮出控件底部的内容，其外观由可使用 Shell.FlyoutFooter 可绑定属性设置的对象定义：

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png">
        </Grid>
    </Shell.FlyoutFooter>
</Shell>

练习：实现浮出控件导航

在示例方案中，你有一个 MAUI 应用，其中包含用于显示有关天体、月相和日出/日落时间的信息的页面。该应用程序还包括一个“关于”页面。目前，这些页面都是独立的，但您希望为用户提供一种在它们之间移动的逻辑方式。

在本练习中，你将向应用添加浮出控件导航。

打开入门级解决方案

克隆或下载锻炼存储库。 

备注

最好将练习内容克隆或下载到较短的文件夹路径（如 C：\dev），以避免生成生成的文件超过最大路径长度。

转到克隆存储库中的 exercise1 文件夹，然后移动到启动文件夹。

使用 Visual Studio 打开 Astronomy.sln解决方案。

在“解决方案资源管理器”窗口的“天文学”项目中，展开“页面”文件夹。此文件夹包含以下页面：

关于页面。此页面显示有关应用的信息。

月相页.此页面显示从地球看到的有关月球相位的特定信息。

日出页面。此页面显示地球上位置的日出和日落时间。数据由日出日落 Web 服务提供。

生成并运行应用。当应用启动时，将显示 MoonPhasePage，但目前没有提供任何方法使用户能够导航到其他页面。下图显示了在安卓模拟器上运行的应用：

关闭应用并返回到 Visual Studio。

添加浮出控件导航

在“解决方案资源管理器”窗口中，打开 AppShell.xaml 页。

在 XAML 标记编辑器中，用 .将项的属性设置为月相。标记应如下所示：<ShellContent><FlyoutItem>Title<Flyout>

<FlyoutItem Title="Moon Phase">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
</FlyoutItem>

向节点添加属性以显示图像。默认情况下，它将显示三个水平条，但我们可以将其更改为我们喜欢的任何内容。标记应如下所示：FlyoutIcon<Shell>

<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

运行应用程序。您现在应该在应用程序的左上角看到月亮图像。

点击该图标，浮出控件将出现。

现在添加更多浮出控件选项。在您刚刚制作的版本下方创建一个新文件，并将其设置为日出。它应该指向页面。<FlyoutItem>TitleShellContentSunrisePage

添加另一个 ，将其标题设置为“关于”。这次将 设置为 。附加的 XAML 应如下所示：<FlyoutItem>ShellContentAboutPage

<FlyoutItem Title="Sunrise">
    <ShellContent
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

再次运行应用，现在浮出控件中将有三个选项。点击浮出控件项将显示其各自的页面。

 

备注

如果你在 Windows 以外的平台上运行，则可能需要在该平台上为你的应用启用“位置”权限，“日出/日落时间”页才能正常工作。例如，在 Android 设备上，将“位置信息”设置为“仅在使用应用时允许”。

添加图标

你可能已注意到浮出控件项看起来有点空。可以使用该属性向浮出控件项添加图标。Icon

某些图像已添加到“资源\图像”文件夹中供您使用。

将第一个的属性设置为月亮.png。IconFlyoutItem

<FlyoutItem Title="Moon Phase" Icon="moon.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</FlyoutItem>

对其他 2 个浮出控件项重复上述步骤，分别使用 sun.png 和 question.png。

<FlyoutItem Title="Sunrise" Icon="sun.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

运行应用并打开浮出控件。你将看到每个浮出控件项现在都有一个关联的图标。

添加浮出控件标头

浮出控件项位于浮出控件菜单的最顶部，因此难以区分。我们可以在顶部添加一些空间，甚至可以通过使用 .View<Shell.FlyoutHeader>

作为节点的子节点，添加以下内容：<Shell>

<Shell.FlyoutHeader>
</Shell.FlyoutHeader>

在 中创建所需的任何视图层次结构。让我们用 .<Shell.FlyoutHeader>GridImage

<Shell.FlyoutHeader>
    <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
        <Image Source="moon.png" />
    </Grid>
</Shell.FlyoutHeader>

使用 .NET MAUI Shell 实现选项卡导航

选项卡导航是一种导航模式，其中选项卡条（一行可触摸控件）永久显示在屏幕的顶部或底部。选项卡导航为用户提供了一种在多页应用中的页面之间进行选择的机制。

在本单元中，你将了解如何创建实现选项卡导航的应用。

什么是选项卡导航？

在使用选项卡导航的应用中，每个选项卡表示应用的特定部分或页面。用户选择选项卡条中的选项卡，以在应用程序中的内容之间移动。例如，下图显示了在 iOS 时钟应用中使用选项卡导航。页面底部突出显示的图标使您能够在不同视图之间切换。这些图标对应于选项卡，视图是选项卡式页面：

由于选项卡条始终可见，因此选项卡导航允许用户在应用程序中的内容之间快速切换。当应用程序具有用户可能经常使用的多个部分时，选项卡导航是理想的选择。时钟应用就是一个很好的例子。时钟、闹钟和秒表部分可能经常使用。

在移动设备上，选项卡条通常具有有限的空间量，并且只能显示固定数量的选项卡，具体取决于设备大小和方向。建议仅使用三到四个选项卡。如果您包含更多标签页，则无法保证有足够的空间来显示所有设备上的所有标签页。.NET MAUI 支持的操作系统允许溢出区域。此区域提供了更多区域来访问不适合屏幕的选项卡。但是，导航到这些溢出选项卡需要用户执行其他步骤。这些部分不太容易被发现。

如果需要四个以上的选项卡，请考虑使用其他导航模式，如浮出控件项导航。此外，如果数据形成自然的主从层次结构，则选项卡导航不是最佳选择。在这些情况下，应考虑堆栈导航。

.NET MAUI 应用程序中的选项卡导航

您可以使用该对象通过 Shell .NET MAUI 应用实现选项卡导航。该对象显示一组选项卡，并在用户选择选项卡时自动切换显示的内容。下图显示了 UI 区域。TabBarTabBar

若要在 .NET MAUI Shell 应用程序中使用选项卡，请创建该类的实例作为该类的子级。然后将对象添加到 .在对象中，应将对象设置为对象。TabBarShellTabTabBarTabShellContentContentPage

创建选项卡式页面

您可以将实例创建为类的子级。根据需要将对象作为子级添加到 。在对象中，应将对象设置为对象。TabBarShellTabTabBarTabShellContentContentPage

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Moon Phase"
            Icon="moon.png">
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
       <Tab Title="Sunrise"
            Icon="sun.png">
           <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
       </Tab>
    </TabBar>
</Shell>

弹出菜单中的选项卡

浮出控件项可以打开具有显示一个或多个选项卡的选项卡栏的页面。

实现这一点相对简单。在“为要显示的每个选项卡添加多个项目”中。<FlyoutItem><ShellContent>

将 和 设置为 控制选项卡的标题和图标。TitleIcon<ShellContent>

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

练习：实现选项卡导航

在天文学应用中，系统要求你将选项卡与浮出控件组合在一起，以帮助在不同页面之间导航。

你决定做的第一件事是从浮出控件中删除所有页面，并将它们添加到 ，以便你可以查看应用的外观。TabBar

添加选项卡栏

在“解决方案资源管理器”窗口中，打开 AppShell.xaml 页。

在 XAML 标记页中，删除 .<Shell>

创建 和 空 .<TabBar><Tab>

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

    <TabBar>
        <Tab>

        </Tab>
    </TabBar>
</Shell>

接下来将 a 添加到 .内容将是 .ShellContentTabMoonPhasePage

<TabBar>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
    </Tab>
</TabBar>

现在，为选项卡指定要显示的标题和使用 and 属性的图标。TitleIcon

<Tab Title="Moon Phase" Icon="moon.png">

为 添加另一个 .使它相等的日出和相等的太阳.png。完成的 XAML 将如下所示：TabSunrisePageTitleIcon

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

    <Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>

    <TabBar>
        <Tab Title="Moon Phase" Icon="moon.png">
            <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
        </Tab>
        <Tab Title="Sunrise" Icon="sun.png">
            <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
        </Tab>
    </TabBar>
</Shell>

运行应用以查看其外观。

将选项卡页与浮出控件合并

您认为将月相和日出页面放在同一标签页中是有意义的。将“关于”页面分开也是有意义的。因此，你决定将浮出控件添加回。第一个浮出控件项将显示选项卡页，第二个浮出控件项将显示“关于”页。

删除 您刚刚创建的 及其所有子项。TabBar

在其位置上，添加 .将其属性设置为“天文学”，将其图标设置为“月亮.png”。<FlyoutItem>Title

<FlyoutItem Title="Astronomy" Icon="moon.png">

</FlyoutItem>

在 中添加一个指向 .将其属性设置为月相，将属性设置为月相.png。<FlyoutItem><ShellContent>MoonPhasePageTitleIcon

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
</FlyoutItem>

在同一个中，添加另一个以指向 .将其属性设置为日出，将属性设置为.png。<FlyoutItem><ShellContent>SunrisePageTitleIcon

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

点击此浮出控件项现在将显示一个包含两个选项卡的选项卡页。

若要创建指向 的新浮出控件项，请添加新的 。将其属性设置为“关于”，将属性设置为“问题.png”。AboutPage<FlyoutItem>TitleIcon

其中添加一个指向 .<FlyoutItem><ShellContent>AboutPage

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

再次运行应用。你应该会在浮出控件中看到两个项目。第一个将打开一个选项卡页面，其中包含 和 。第二个显示本身。MoonPhasePageSunrisePageAboutPage

需要帮助？

AppShell.xaml 的最终 XAML 应如下所示：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->


    <FlyoutItem Title="Astronomy" Icon="moon.png">
        <ShellContent Title="Moon Phase" Icon="moon.png"
            ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

        <ShellContent Title="Sunrise" Icon="sun.png"
            ContentTemplate="{DataTemplate local:SunrisePage}"/>
    </FlyoutItem>

    <FlyoutItem Title="About" Icon="question.png">
        <ShellContent
            ContentTemplate="{DataTemplate local:AboutPage}"/>
    </FlyoutItem>

</Shell>

将选项卡式页面与导航堆栈上的页面一起使用

浮出控件和选项卡式导航只是使用户能够浏览应用提供的数据的两种方法。另一种技术是使用堆栈导航。每种类型的导航都适用于页面之间不同类型的关系。

可以将堆栈导航与浮出控件和选项卡结合使用。在本单元中，你将简要回顾选项卡和浮出控件导航以及堆栈导航之间的差异，并了解如何构建结合使用这两种技术的应用。

查看选项卡导航和堆栈导航

浮出控件和选项卡导航提供了一种有用的机制，使用户能够随时选择要查看的页面。用户只需选择相应的选项卡或浮出控件项即可导航到页面。这种导航形式对于彼此具有对等关系的数据项非常有用。在天文学应用程序中，太阳，月亮和关于页面都是对等的;它们之间没有直接的关系。

但是，对于分层数据，堆栈导航可能更合适。堆栈导航使用户能够向下钻取一系列页面，其中堆栈中的下一页提供了上一页上所选项目的更详细视图。

请考虑以下情形：

你已向显示天体的天文应用添加了一个新页面。您希望用户点击其中一个天体，然后显示有关它的信息。列出天体的页面最好在标签页中显示为月相和日出页面的兄弟姐妹。有关天体的详细信息最好使用堆栈导航呈现为一系列步骤。这种机制还将使用户能够通过点击后退按钮返回到主天体页面。

.NET 多平台应用 UI （.NET MAUI） Shell 包括基于 URI 的导航体验，该体验使用路由导航到应用中的任何页面，而无需遵循设置的导航层次结构。此外，它还提供了向后导航的功能，而无需访问导航堆栈上的所有页面。

类定义以下与导航相关的属性：

  • BackButtonBehavior，类型为 ，定义后退按钮行为的附加属性。BackButtonBehavior
  • CurrentItem，类型为 当前选定的项目。ShellItem
  • CurrentPage，类型为 当前显示的页面。Page
  • CurrentState的类型为 ，的当前导航状态。ShellNavigationStateShell
  • Current，的类型为 ，的类型转换别名。ShellApplication.Current.MainPage

导航是通过从类中调用方法来执行的。GoToAsyncShell

路线

导航是通过指定要导航到的 URI 在 Shell 应用中执行的。导航 URI 可以有三个组件：

  • 路由，它定义作为命令行管理程序视觉对象层次结构的一部分存在的内容的路径。
  • 页面。Shell 视觉对象层次结构中不存在的页面可以从 Shell 应用内的任何位置推送到导航堆栈上。例如，不会在 Shell 视觉对象层次结构中定义详细信息页，但可以根据需要推送到导航堆栈上。
  • 一个或多个查询参数。查询参数是可以在导航时传递到目标页的参数。

当导航 URI 包含所有三个组件时，结构为：//route/page？queryParameters

注册路由

路由可以通过其属性在 、 和 对象上定义：FlyoutItemTabBarTabShellContentRoute

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

若要导航到该路由，绝对路由 URI 为moonphase//astronomy/moonphase

注册详细路线

在子类构造函数或调用路由之前运行的任何其他位置中，可以为 Shell 视觉层次结构中未表示的任何详细信息页显式注册其他路由。这是通过以下方法完成的：ShellRouting.RegisterRoute

Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));

要导航到该文件夹，请调用：AstronomicalBodyPage

await Shell.Current.GoToAsync("astronomicalbodydetails");`

向后导航

可以通过指定“..”作为方法的参数来执行向后导航：GoToAsync

await Shell.Current.GoToAsync("..");

传递数据

在执行基于 URI 的编程导航时，可以将基元数据作为基于字符串的查询参数传递。这是通过在路由后追加，后跟查询参数 ID 和值来实现的：?=

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

在此示例中，路径为天体详细信息，参数为 bodyName，值来自变量 。celestialName

检索数据

可以通过为每个基于字符串的查询参数和基于对象的导航参数修饰接收类来接收导航数据：QueryPropertyAttribute

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

在此示例中，QueryPropertyAttribute 的第一个参数指定将接收数据的属性的名称，第二个参数指定参数 ID。

练习：将选项卡式页面与导航页面一起使用

在天文学应用中，系统要求你添加页面，使用户能够选择不同的天体并显示其详细信息。可能有任意数量的主体，因此为每个主体创建一个选项卡不是一种可行的方法。因此，若要使用户能够选择要查看的正文，您决定添加另一个包含列表的页面。用户将能够从此列表中选择正文。然后，应用将在新页面中显示该正文的详细信息。列表页将充当堆栈导航的根页。您需要将列表页添加为现有用户界面中的选项卡。

打开入门级解决方案

转到在本模块开始时克隆的存储库中的 exercise3 文件夹，然后移动到 start 文件夹。

使用 Visual Studio 打开 Astronomy.sln解决方案。 

备注

此解决方案包含不在前面练习中使用的应用版本中的其他页面。

在“解决方案资源管理器”窗口中，打开“页面”文件夹。除了 MoonPhasePage、SunrisePage 和 AboutPage 文件外，此文件夹还包含两个附加页面：

天体页面。此页面包含四个按钮，使用户能够选择太阳，月球，地球或哈雷彗星的详细信息。该应用程序的当前版本只是一个概念证明。将来，此页面将使用户能够从更大的列表中进行选择。

天文体页面。此页面用于显示天体的信息。

“天文物体”页面已添加为单击“天文学”浮出控件时显示的页面上的选项卡。

为详细信息页面添加路线

要导航到AstronomicalBodyPage，需要设置一条路线。您可以在 AppShell 类的构造函数中执行此操作：

public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
}

导航到详细信息页面

现在我们需要执行导航。在 AstronomicalBodiesPage.xaml 中.cs为页面上的每个事件处理程序创建单击事件处理程序。Button

public AstronomicalBodiesPage()
 {
 	InitializeComponent();

 	btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
 	btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
 	btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
 	btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
}

每当单击 a 时，该应用程序将导航到 AstronomicalBodyPage 页面。但是我们仍然需要发送要显示的天体类型。Button

要将数据发送到 AstronomicalBodyPage，请将查询参数字符串添加到路由信息中。它将是的形式 。?astroName=astroBodyToDisplay

btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");

若要在 AstronomicalBodyPage 上接收数据，请首先创建一个类级属性来保存传入的数据。命名它 。AstroName

string astroName;
public string AstroName
{
    get => astroName;
    set
    {
        astroName = value;

        // this is a custom function to update the UI immediately
        UpdateAstroBodyUI(astroName);
    } 
}

此处是一个帮助程序函数，用于在设置属性时立即更新用户界面。UpdateAstroBodyUI(astroName)AstroName

然后，您需要使用将传入查询参数映射到刚创建的属性的批注来修饰类。

[QueryProperty(nameof(AstroName), "astroName")]
public partial class AstronomicalBodyPage
{ ...

启动应用，然后选择标题为“正文”的选项卡。

选择“地球”按钮。地球的细节应该出现。导航栏应包含一个后退箭头，使用户能够返回到正文列表。其余选项卡仍然可见且处于活动状态：

关闭应用并返回到 Visual Studio。

总结

规划应用的体系结构的一部分是决定用户如何在页面之间移动。在本模块中，你学习了如何使用浮出控件和选项卡式页面来实现在多个页面上显示数据的应用。现在，您应该了解此导航模式何时合适、如何实现它以及如何自定义选项卡式页面的行为。您还学习了如何将选项卡式页面与使用导航堆栈的导航页面组合在一起。具体而言，您学习了如何：

  • 使用 .NET MAUI Shell 实现浮出控件导航
  • 使用 .NET MAUI Shell 实现选项卡导航
  • 在选项卡式页面中的页面之间导航

给TA打赏
共{{data.count}}人
人已打赏
.NET MAUI

在 .NET MAUI 应用中使用 SQLite 存储本地数据

2022-6-27 19:58:19

.NET MAUI

使用共享资源设计一致的 .NET MAUI XAML 页面

2022-6-29 18:17:32

ruanzhu
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 51Aspx公众号

  • 企业微信客服

返回顶部