Question

我需要通过路由导航到堆栈中的一个页面，但它无法正确导航，因为它仍在记住现有的 Shell 导航状态。

我需要有关如何设置导航的示例或信息。它应该像向导一样向前和向后导航，或者像页面中的面包屑一样导航。

Answer 1

如果你想通过shell实现页面导航，可以参考这篇链接文章：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation。通过shell实现页面导航，首先配置需要重定向的网页的路由，如Routing.RegisterRoute("page2", typeof(Page2))。如果要实现页面向后跳转，可以使用Shell.Current.GoToAsync()。如果要实现页面跳转，可以使用Shell.Current.GoToAsync("..")。

这是一个页面导航跳转的例子：

1.创建三个页面。

2.创建一个shell页面：

    <Shell xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:App8"
        x:Class="App8.ShellPage">
        <ShellContent Title="Page1"
                      Icon="tupian.jpg"
                      ContentTemplate="{DataTemplate views:Page1}"  />
    </Shell>

3.在shell页面设置路由信息绑定三个页面：

    public ShellPage()
    {
        InitializeComponent();
        Routing.RegisterRoute("page2", typeof(Page2));
        Routing.RegisterRoute("page3", typeof(Page3));
        Routing.RegisterRoute("page1", typeof(Page1));
    }

4.添加跳转和返回按钮到三个页面（xaml）：

  <StackLayout>
        <Label Text="Welcome to Page1!" FontSize="Large"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
        <Button Clicked="Button_Clicked" Text="click to page2"></Button>
        <Button Clicked="Button_Clicked_1" Text="click to page3"></Button>
        <Button Clicked="Button_Clicked_2"  Text="go back"></Button>
  </StackLayout>

5.创建三个页面并添加跳转按钮：

public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
    }

    private async void Button_Clicked(object sender, EventArgs e)
    {
        // Jump method
        await Shell.Current.GoToAsync("/page2");
    }

    private async void Button_Clicked_1(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("/page3");
    }

    private async void Button_Clicked_2(object sender, EventArgs e)
    {
        // Jump back method
        await Shell.Current.GoToAsync("..");
    }
}

通过路由进行多页面导航

1 个答案: