locked
Using NavigationPage in a TabbedPage with Prism and Xamarin.Forms RRS feed

  • Question

  • User128517 posted

    I am using Prism in my Xamarin.Forms app and for some reason OnNavigatedTo is not being called on the other pages in my TabbedPage. It seems to be because I am using navigation pages for each tab, but I looked through the docs, the Github page, the forums etc and I can't seem to find the correct way to make it work. Has anyone had any luck getting this to work properly?

    TabsPage.xaml: <?xml version="1.0" encoding="UTF-8"?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" xmlns:views="clr-namespace:MyApp.Views" xmlns:local="clr-namespace:MyApp;assembly=MyApp" x:Class="MyApp.Views.TabsPage"> <TabbedPage.Children> <NavigationPage Title="Tab 1"> <x:Arguments> <views:HomePage /> </x:Arguments> </NavigationPage> <NavigationPage Title="Tab 2"> <x:Arguments> <views:SecondPage /> </x:Arguments> </NavigationPage> <NavigationPage Title="Tab 3"> <x:Arguments> <views:ThirdPage /> </x:Arguments> </NavigationPage> <NavigationPage Title="Tab 4"> <x:Arguments> <views:FourthPage /> </x:Arguments> </NavigationPage> </TabbedPage.Children> </TabbedPage> TabsPage.xaml.cs: ``` using Prism.Navigation; using Xamarin.Forms;

    namespace MyApp.Views { public partial class TabsPage : TabbedPage, INavigatingAware { public TabsPage() { InitializeComponent(); }

        public void OnNavigatingTo(NavigationParameters parameters)
        {
            foreach (var child in Children)
            {
                (child as INavigatingAware)?.OnNavigatingTo(parameters);
                (child?.BindingContext as INavigatingAware)?.OnNavigatingTo(parameters);
            }
        }
    }
    

    } ```

    SecondPageViewModel.cs: ``` using System.Collections.Generic; using System.Linq; using Prism.Navigation; using System.IO; using MyApp.Models; using System.Collections.ObjectModel; using Xamarin.Forms; using System.Reflection;

    namespace MyApp.ViewModels { public class SecondPageViewModel : BaseViewModel, INavigationAware { public SecondPageViewModel(INavigationService navigationService) : base(navigationService) { }

        public override void OnNavigatedTo(NavigationParameters parameters)
        {
            System.Diagnostics.Debug.WriteLine("ON NAVIGATED TO RAN!");
        }
    }
    

    } ```

    BaseViewModel.cs ``` using Prism.Commands; using Prism.Mvvm; using System; using System.Collections.Generic; using System.Linq; using Prism.Navigation; using Xamarin.Forms;

    namespace MyApp.ViewModels { public class BaseViewModel : BindableBase, INavigatingAware, IDestructible {

    public INavigationService _navigationService { get; }
    
    public BaseViewModel(INavigationService navigationService)
    {
        _navigationService = navigationService;
    }
    
        public virtual void Destroy()
        {
        }
    
        public virtual void OnNavigatedFrom(NavigationParameters parameters)
        {
        }
    
        public virtual void OnNavigatedTo(NavigationParameters parameters)
        {
        }
    
        public virtual void OnNavigatingTo(NavigationParameters parameters)
        {
        }
    
        public Command NavigateCommand
        {
            get
            {
                return new Command<string>(async (url) =>
                {
                    await _navigationService.NavigateAsync(url);
                });
            }
        }
    
        public Command BackCommand
        {
            get
            {
                return new Command(async () =>
                {
                    await _navigationService.GoBackAsync();
                });
            }
        }
    }
    

    } ```

    Thursday, August 31, 2017 8:58 PM

Answers

  • User116727 posted

    Selecting a tab is not a navigation operation. You are simply selecting a new tab. This means that the INavAware methods will not fire during tab selection. Instead you should be implementing the IActiveAware interface to determine the active tab. Unfortunately, since you are wrapping everything in a NavigationPage it till won't work as this isn't currently supported.

    We are trying to think of a solution and you can find a work around in this thread: https://github.com/PrismLibrary/Prism/issues/1076

    For now, use a custom NavigationPage or some type of custom behavior to manage it. We hope to think of a more permanent solution soon.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, August 31, 2017 10:38 PM

All replies

  • User116727 posted

    When are you expecting the OnNavigatedTo method to be invoked? Are you simply changing the selected tab and expecting it to invoke?

    Thursday, August 31, 2017 10:25 PM
  • User128517 posted

    @BrianLagunas Yes i'm expecting it to fire when I select the tab, but nothing happens. I saw lots of different posts about how to get it to work properly and nothing work and all the posts seem to be on older versions. The Prism samples don't show how to do this either. :(

    Thursday, August 31, 2017 10:34 PM
  • User116727 posted

    Selecting a tab is not a navigation operation. You are simply selecting a new tab. This means that the INavAware methods will not fire during tab selection. Instead you should be implementing the IActiveAware interface to determine the active tab. Unfortunately, since you are wrapping everything in a NavigationPage it till won't work as this isn't currently supported.

    We are trying to think of a solution and you can find a work around in this thread: https://github.com/PrismLibrary/Prism/issues/1076

    For now, use a custom NavigationPage or some type of custom behavior to manage it. We hope to think of a more permanent solution soon.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, August 31, 2017 10:38 PM
  • User128517 posted

    @BrianLagunas Thanks! I haven't really used Tabs much before, so that article was a bit confusing too, but I combined that info with the info from the link below and I got it working.

    https://forums.xamarin.com/discussion/86919/prism-retrieve-data-when-tab-page-is-active-tabbed-page

    P.S. Prism is amazing! Keep up the great work!

    Thursday, August 31, 2017 11:12 PM
  • User128517 posted

    @BrianLagunas It seems that it isn't working 100% correctly actually. Like people are saying in the issues in the link you shared, i'm getting all pages marked as active when the app loads, but upon switching tabs they are not marked as active properly. Do you know of a way to get this working? It's causing a major issue for my app.

    Tuesday, September 19, 2017 5:40 PM
  • User116727 posted

    As there is no built-in solution yet, you will have to use a work-around such as a custom behavior to get the functionality you need.

    Tuesday, September 19, 2017 10:31 PM
  • User116727 posted

    @"JoshuaNovak.6915" I just added a fix for this. Check the issue for instructions on how to test it out. Let me know if you run into any issues.

    Wednesday, September 20, 2017 5:58 PM
  • User128517 posted

    @BrianLagunas Awesome! Do you know when the updated Nuget will be pushed? Also, I see the fix adds the NavigationPageActiveAwareBehavior, but what else is needed to have OnNavigatedTo called? Or do I need to use form of IActiveAware? Sorry, there are just so many different docs, articles, and issues pertaining to how this work that i'm a bit confused.

    Friday, September 22, 2017 3:23 AM
  • User116727 posted

    Just release the first official preview to NuGet. You can get v7.0.0-pre1 now. OnNavigatedTo does not invoke when changing tabs as you are not navigating. You will need to implement IActiveAware to handle tab selection changes.

    Friday, September 22, 2017 3:32 AM
  • User128517 posted

    @BrianLagunas Ok i'll take a look tomorrow. Do I need to implement IActiveAware on the NavigationPage and the child page, or just the child page?

    Friday, September 22, 2017 3:39 AM
  • User116727 posted

    @"JoshuaNovak.6915" you implement IActiveAware on the pages that will represent your Tabs. Not the NavigationPage.

    Friday, September 22, 2017 3:16 PM