.NET MAUI Shell: How can `ShellContent` page be added to the navigation stack to enable "navigate back" behavior?

huangapple go评论66阅读模式
英文:

.NET MAUI Shell: How can `ShellContent` page be added to the navigation stack to enable "navigate back" behavior?

问题

我在MAUI Shell XAML中有几个页面:

    <ShellContent
        Title="仪表板"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage">
        <ShellContent.Icon>
            <FontImageSource Glyph="&#xf0db;" FontFamily="AwesomeSolid" Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource Gray100}}" />
        </ShellContent.Icon>
    </ShellContent>

    <ShellContent
        Title="Ot"
        ContentTemplate="{DataTemplate local:OtherPage}"
        Route="OtherPage">
        <ShellContent.Icon>
            <FontImageSource Glyph="&#xe52f;" FontFamily="AwesomeSolid" Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource Gray100}}" />
        </ShellContent.Icon>
    </ShellContent>

Shell导航正常工作,但如果用户在"OtherPage"上点击"返回",应用程序将不会将用户返回到主页面。此外,从Shell Flyout导航不会在"OtherPage"上添加返回按钮。

如果我在"OtherPage"上放置一个按钮并尝试查看导航堆栈,似乎它不记录先前的页面:

private async void Button_Clicked(object sender, EventArgs e)
{
    Console.WriteLine(Shell.Current.Navigation.NavigationStack.Count);  // 打印 1

    await Shell.Current.Navigation.PopAsync();  // 不起作用

    await Shell.Current.GoToAsync("..");    // 不起作用

    await Shell.Current.GoToAsync("///MainPage"); // 导航到MainPage
}

从最后一个调用中,我可以看到导航正在工作,但从Shell导航不会将页面添加到导航堆栈。

如何实现以下行为:

  1. 应用程序从"MainPage"开始
  2. 用户通过Shell Flyout导航到"OtherPage"
  3. 用户在"OtherPage"上点击"返回"按钮并返回到"MainPage"
英文:

I have several page in MAUI Shell XAML:

    &lt;ShellContent
        Title=&quot;Dashboard&quot;
        ContentTemplate=&quot;{DataTemplate local:MainPage}&quot;
        Route=&quot;MainPage&quot;&gt;
        &lt;ShellContent.Icon&gt;
            &lt;FontImageSource Glyph=&quot;&amp;#xf0db;&quot; FontFamily=&quot;AwesomeSolid&quot; Color=&quot;{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource Gray100}}&quot; /&gt;
        &lt;/ShellContent.Icon&gt;
    &lt;/ShellContent&gt;

    &lt;ShellContent
        Title=&quot;Ot&quot;
        ContentTemplate=&quot;{DataTemplate local:OtherPage}&quot;
        Route=&quot;OtherPage&quot;&gt;
        &lt;ShellContent.Icon&gt;
            &lt;FontImageSource Glyph=&quot;&amp;#xe52f;&quot; FontFamily=&quot;AwesomeSolid&quot; Color=&quot;{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource Gray100}}&quot; /&gt;
        &lt;/ShellContent.Icon&gt;
    &lt;/ShellContent&gt;

Shell navigation works fine, but if user taps "back" on OtherPage the application will not return the user back to the main page. Also, navigation from Shell Flyout does not add a back button to the OtherPage.

If I put a button on OtherPage and try to explore navigation stack it seems like it doesn't record previous page:

private async void Button_Clicked(object sender, EventArgs e)
    {
        Console.WriteLine(Shell.Current.Navigation.NavigationStack.Count);  // prints 1

        await Shell.Current.Navigation.PopAsync();  // doesn&#39;t work

        await Shell.Current.GoToAsync(&quot;..&quot;);    // doesn&#39;t work

        await Shell.Current.GoToAsync(&quot;///MainPage&quot;); // navigates to MainPage
    }

From the last call I can see that navigation is working, but navigating from Shell doesn't add page to the navigation stack.

How do I achieve the behavior that:

  1. Application starts on MainPage
  2. User navigates to OtherPage via Shell Flyout
  3. User taps "back" button while on OtherPage and returns to MainPage

答案1

得分: 1

Shell.Xaml中的Shell内容将默认设置为导航堆栈中的根页面。换句话说,当您通过Shell Flyout导航到一个页面时,该页面将成为根页面。

当您导航到一个未添加到Shell作为flyoutitem的页面时,返回按钮将仅显示。因此,当您在两个页面之间导航时,OtherPageMainPage都不会显示返回按钮。使用Shell.Current.GoToAsync在两个页面之间导航与使用Shell Flyout相同。

因此,您可以删除其中一个ShellContent,并只使用Shell.Current.GoToAsync在两个页面之间导航,或者只使用Shell Flyout。

更新

在OtherPage的xaml.cs中:

protected override bool OnBackButtonPressed()
{
    await Shell.Current.GoToAsync("///MainPage");
    return true;
}
英文:

The shell content in the Shell.Xaml will be default set as the root page in the navigation stack. In other words, when you navigates to a page via Shell Flyout, that page will be a rootpage.

And the back button will show only when you go to a page which is not added into the Shell as a flyoutitem. So both of the OtherPage and the MainPage will not show the back button when you navigation between the two pages. You navigate between the two pages with the Shell.Current.GoToAsync is same as using the Shell Flyout.

So you can remove one of the ShellContent and only use the Shell.Current.GoToAsync to navigate between the two page or only use the Shell Flyout.

Update

In the OtherPage's xaml.cs:

protected override bool OnBackButtonPressed()
{
    await Shell.Current.GoToAsync(&quot;///MainPage&quot;);
    return true;
}

huangapple
  • 本文由 发表于 2023年2月10日 15:28:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/75408070.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定