从 TabbedPage 中的选项卡导航到页面 [英] Navigate to a page from a tab within a TabbedPage

问题描述

我有一个简单的 Xamarin.Forms 应用程序，其主页为 TabbedPage，如下所示:

I have a simple Xamarin.Forms app with a main page as TabbedPage which looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    x:Class="PrismSample.Views.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:prism="http://prismlibrary.com"
    xmlns:views="clr-namespace:PrismSample.Views"
    Title="Main Page"
    prism:ViewModelLocator.AutowireViewModel="True">

    <TabbedPage.Children>
        <NavigationPage Title="Page1">
            <x:Arguments>
                <views:OnePage Title="Page 1" />
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="Page2">
            <x:Arguments>
                <views:TwoPage Title="Page 2" />
            </x:Arguments>
        </NavigationPage>

    </TabbedPage.Children>
</TabbedPage>

在页面OnePage"上我有一个按钮.当我点击该按钮时，我想导航到名为ThreePage"的页面.

On the page "OnePage" I have a button. When I tap on that button I want to navigate to a page named "ThreePage".

页面:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    x:Class="PrismSample.Views.OnePage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:prism="http://prismlibrary.com"
    prism:ViewModelLocator.AutowireViewModel="True">
    <ContentPage.Content>
        <StackLayout Margin="20" Spacing="20">
            <Label HorizontalOptions="CenterAndExpand" Text="Page 1" />
            <Button
                x:Name="Button1"
                Command="{Binding ClickMeCommand}"
                HorizontalOptions="FillAndExpand"
                Text="Open Page 3" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

OnePageViewModel:

OnePageViewModel:

namespace PrismSample.ViewModels
{
    public class OnePageViewModel : BindableBase
    {
        private readonly INavigationService navigationService;
        public DelegateCommand ClickMeCommand { private set; get; }

        public OnePageViewModel(INavigationService navigationService)
        {
            this.navigationService = navigationService;
            ClickMeCommand = new DelegateCommand(async () => await ClickedAsync(), () => true);

            Debug.WriteLine($"NavigationStack: {this.navigationService.GetNavigationUriPath()}", nameof(OnePageViewModel));
        }

        public Task ClickedAsync()
        {
            Debug.WriteLine($"You clicked me!", nameof(OnePageViewModel));

            return navigationService.NavigateAsync("ThreePage");
        }
    }
}

App.xaml.cs

App.xaml.cs

namespace PrismSample
{
    public partial class App
    {
        public App() : this(null) { }

        public App(IPlatformInitializer initializer) : base(initializer) { }

        protected override async void OnInitialized()
        {
            InitializeComponent();

            var result = await NavigationService.NavigateAsync("MainPage");

            if(!result.Success)
            {
                System.Diagnostics.Debugger.Break();
            }
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
            containerRegistry.RegisterForNavigation<OnePage, OnePageViewModel>();
            containerRegistry.RegisterForNavigation<TwoPage, TwoPageViewModel>();
            containerRegistry.RegisterForNavigation<ThreePage, ThreePageViewModel>();
        }
    }
}

我期望以下内容:当点击按钮时，导航到页面ThreePage".在第一个选项卡中完成.我也期待有一个背部"导航栏中的按钮.

I expected the following: When tapping on the button a navigation to the page "ThreePage" is done within the first tab. I also expected to have a "Back" button in the navigation bar.

会发生什么:第一个选项卡中没有任何内容.但是，如果我切换到第二个选项卡，它会显示ThreePage"页面.但也没有后退"按钮.

What happens: Nothing in the first tab. But if I switch to the second tab it shows the page "ThreePage" but also without a "Back" button.

这里出了什么问题???

What is going wrong here???

我在这里附上了我的项目:https://www.dropbox.com/s/fuu2wo5zqhp52gk/08-TabbedNavigation.zip?dl=0

I have attached my project here: https://www.dropbox.com/s/fuu2wo5zqhp52gk/08-TabbedNavigation.zip?dl=0

推荐答案

通过 TabbedPages 导航在最新的 Prism 发布版本 (8.0.0.1909) 中被破坏.

Navigating via TabbedPages is broken in the latest Prism released version (8.0.0.1909).

[Bug] 在标签页中导航不会改变当前选择的标签 #2218

(看来他们终于解决了这个问题，但他们直到现在还没有发布新版本)

(It seems they finally have fixed this issue but they haven't released a new version until now)

因此将 Prism.DryIoc 降级到 7.2.0.1422 或等待下一个 Prism 版本...

So downgrade Prism.DryIoc to 7.2.0.1422 or wait for the next Prism release...

这篇关于从 TabbedPage 中的选项卡导航到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！