MAUI 从代码隐藏导航弹出项目

Question

我想从代码隐藏中导航 FlyoutItems。 通常的

Shell.Current.GoToAsync(nameof(PageTwo));

的工作方式不同。

演示： 我在 Visual Studio 2022 中创建了一个默认的 MAUI 应用程序。我安装了 nuget CommunityToolkit.MVVM.Input。 我添加了 3 个 XAML 内容页。

在 App.Shell.xaml 中，我添加了 3 个弹出项目。 当我运行该应用程序时，它们会出现并完美运行。 请注意，菜单的“selectedItem”毫不费力地同步。 这是我想从代码隐藏/视图模型中使用的行为。

Shell.FlyoutBehavior="Flyout"
Title="DeleteMe2">


<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">

    <ShellContent
        Title="Page One"
        Icon="one_icon.png"
        ContentTemplate="{DataTemplate local:PageOne}"
        Route="PageOne" />
    <ShellContent
        Title="Page Two"
        Icon="two_icon.png"
        ContentTemplate="{DataTemplate local:PageTwo}"
        Route="PageTwo" />
    <ShellContent
        Title="Page Three"
        Icon="three_icon.png"
        ContentTemplate="{DataTemplate local:PageThree}"
        IsVisible="true"
        Route="PageThree" />

</FlyoutItem>

页面上有一些按钮可以“执行某些操作”，然后导航到其他页面。在视图模型中。 这似乎创建了其他页面的新实例，并且导航属性丢失了。

[RelayCommand]
public void GoToPageTwo()
{
    //this opens a new instance of PageTwo
    //and has a "Back" arrow on the top left
    Shell.Current.GoToAsync(nameof(PageTwo));
}

[RelayCommand]
public void GoToPageThree()
{
    Shell.Current.GoToAsync(nameof(PageThree));
}

因此，在我的代码后面，我想模仿点击弹出菜单项或页面底部按钮的行为

Answer 1

在您的情况下，所有三个页面都是根页面。因此，您可以调用以下代码来更改导航堆栈的根页面。

[RelayCommand]
public void GoToPageTwo()
{
    //this opens a new instance of PageTwo
    //and has a "Back" arrow on the top left
    Shell.Current.GoToAsync("//PageTwo");
}

[RelayCommand]
public void GoToPageThree()
{
    Shell.Current.GoToAsync("//PageThree");
}

此外，

Shell.Current.GoToAsync("///PageThree");

也是工作。更多信息可以查看官方文档相对路线。