Launch Navigation Page within Tabbed Page

AlbertKAlbertK MYMember ✭✭✭

I would like to know why a navigation page is not launched within a tabbed page. nothing happen plus there is no error. How can I get navigation page to work ? Thank you.

###################
App.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace MyApp
{
    public partial class App : Application
    {

        public App()
        {

            MainPage = new MyApp.View.MainTabbedPage(); 

        }
     }
}
####################
MainTabbedPage.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:local="clr-namespace:MyApp.View;assembly=MyApp"
            x:Class="MyApp.View.MainTabbedPage" 
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#2196F3"
            BarTextColor="White"
            android:TabbedPage.BarItemColor="#66FFFFFF"
            android:TabbedPage.BarSelectedItemColor="White" 

           >
    <TabbedPage.Title></TabbedPage.Title>
    <TabbedPage.Children>
        <local:HomePage />
        <local:SharingPage/>
        <local:SettingPage/>
    </TabbedPage.Children>

</TabbedPage>

##############
HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.View.HomePage"
             x:Name="HomePage" >

    <StackLayout>


        <!-- Place new controls here -->

        <Button x:Name="Button" Text="Go" 
               Command="{Binding GoLaunchPage}"
               VerticalOptions="Center">
        </Button>


    </StackLayout>

</ContentPage>

##################
HomePage.xaml.cs

namespace MyApp.View
{
    public partial class HomePage : ContentPage
    {

        public DevicePage()
        {

            BindingContext = new HomeViewModel();
            InitializeComponent();

        }
     }
}

##################
HomeViewModel.cs

namespace MyApp.ViewModel
{
    class HomeViewModel: ViewModelBase
    {

    public HomeViewModel()
    {}
     public ICommand GoLaunchPage => new Command(async () => 
        {
             // The page never get launched.
             var navpage = new NavigationPage();
                     await navpage.PushAsync(new login());
        });
    }
}

Answers

  • nefgrixisnefgrixis Member ✭✭
    edited October 2018

    I think your tabbed page has to be nested inside a Navigation Page. From there you access the Navigation object from the pages.

    So change

     MainPage = new MyApp.View.MainTabbedPage();
    

    to

     MainPage = new NavigationPage(MyApp.View.MainTabbedPage());
    

    and to navigate to another page from the Main Page

    Navigation.PushAsync(new login());
    

    The Navigation object will always be accessed by all the children and nested children of the NavigationPage.

  • AlbertKAlbertK MYMember ✭✭✭

    @nefgrixis , The MS documentation caution not to put a TabbedPage within a NavigationPage, so that is a dilemma for me.

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

    While it's acceptable to place a NavigationPage into a TabbedPage, it's **not recommended to place **a TabbedPage into a NavigationPage. This is because, on iOS, a UITabBarController always acts as a wrapper for the UINavigationController. For more information, see Combined View Controller Interfaces in the iOS Developer Library.

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @AlbertK Yes, you are right. Why don't you start with the current TabbedPage Template in VS2017. That conforms to what you said.

    Your TabbedPage.Children can be defined as follows:

        <TabbedPage.Children>
            <NavigationPage Title="HOME" Icon="tab_feed.png">
                <x:Arguments>
                    <local:HomePage />
                </x:Arguments>
            </NavigationPage>
    
            <NavigationPage Title="SHARE" Icon="tab_feed.png">
                <x:Arguments>
                    <local:SharingPage />
                </x:Arguments>
            </NavigationPage>
    
            <NavigationPage Title="SETTINGS" Icon="tab_about.png">
                <x:Arguments>
                    <local:SettingPage />
                </x:Arguments>
            </NavigationPage>
        </TabbedPage.Children>
    

    Then you can navigate to a page like item details in an event as below:

            private async void ItemsListView_ItemTapped(object sender, ItemTappedEventArgs args)
            {
                Item item = (Item)args.Item;
                if (item != null)
                    await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));
            }
    

    Probably because you are trying to navigate in the HomeViewModel that you are not seeing anything. Try navigating to the Login page in the OnAppearing event of the HomePage, which is the first one to be loaded.

  • AlbertKAlbertK MYMember ✭✭✭

    @ShantimohanElchuri , Is there a way to do in the viewmodel, the call to Navigation.PushAsync ? Thank you.

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭
    edited October 2018

    @AlbertK said:
    @ShantimohanElchuri , Is there a way to do in the viewmodel, the call to Navigation.PushAsync ? Thank you.

    To be frank, I don't know. But expecting that may be a bit too much as the Navigation pertains to UI and a ViewModel pertains to Data. I don't know if they can combined.

    Do you find any advantage to do so?

  • AlbertKAlbertK MYMember ✭✭✭

    @ShantimohanElchuri , The advantage is I have one place to write and debug the code. Also it is a confusing in the xaml what goes where, ie some code goes to viewmodel and some goes to the xaml.cs.

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @AlbertK said:
    @ShantimohanElchuri , The advantage is I have one place to write and debug the code. Also it is a confusing in the xaml what goes where, ie some code goes to viewmodel and some goes to the xaml.cs.

    Anyway you are coding LoginPage only once and be able to PushAsync from anywhere with a single line of code., isn't it?

  • I know I'm late to the party, but wanted to add my contribution. This is still kind of rough and hacky, but seems to work well for Tabbed page based apps. Check out my github joagwa/NavigationTabbed

Sign In or Register to comment.