How to get <NavigationPage.TitleView> working in TabbedPage?

Question

I have a TabbedPage with 3 tabs:

<TabbedPage.Children>
        <views:HomePage Title="Explore" IconImageSource="ic_tab_explore.png" />
        <views:MyListingsPage Title="My Listings" IconImageSource="ic_tab_mylistings.png" />
        <views:ProfilePage Title="Profile" IconImageSource="ic_tab_profile.png" />
    </TabbedPage.Children>

And this TabbedPage also has a NavigationBar.

I am not able to customize the HomePage NavigationBar using:

<NavigationPage.TitleView>
        <Image Source="logo"
               HeightRequest="40"
               WidthRequest="40"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand" />
    </NavigationPage.TitleView>

If I put that code in the TabbedPage.xaml it works, but it applies to all the tabs, while I just want this customization on the HomePage.
The same code works on any other page that I navigate to and is not a page under the TabbedPage. Any ideas?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Do you want to achieve the result like following screenshot with two nagivationbars?

If so, you can use NavigationPage tag to wrap the details page

   <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
               xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"   
                   xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"  
                x:Name="tabbedPage"  
                
               Title="TabbedPage"  
                
               x:Class="TabbedPageWithNavigationPage.MainPage">  
     
     
     
        
     <NavigationPage IconImageSource="today.png">  
           <x:Arguments>  
               <local:TodayPage Title="Today" />  
           </x:Arguments>  
       </NavigationPage>  
     
       <NavigationPage IconImageSource="schedule.png">  
           <x:Arguments>  
               <local:SchedulePage Title="This Week"  />  
           </x:Arguments>  
       </NavigationPage>  
       <NavigationPage   IconImageSource="settings.png" >  
           <x:Arguments>  
               <local:SettingsPage Title="settings" />  
           </x:Arguments>  
       </NavigationPage>  
       
         
   </TabbedPage>  

======================
Update==============================

Based on your comment, I achieve the following tabbedpage.

You should add Title="schedule" for local:SchedulePage like following code, And hide the outside NavigationBar

   <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
               xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"   
                   xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"  
                x:Name="tabbedPage"  
              NavigationPage.HasNavigationBar="False"  
               Title="TabbedPage"  
                
               x:Class="TabbedPageWithNavigationPage.MainPage">  
     
     
       <NavigationPage Title="Today" IconImageSource="today.png">  
           <x:Arguments>  
               <local:TodayPage Title="Today" />  
           </x:Arguments>  
       </NavigationPage>  
     
       <NavigationPage Title="Schedule" IconImageSource="schedule.png" >  
           <x:Arguments>  
               <local:SchedulePage Title="schedule"  />  
           </x:Arguments>  
       </NavigationPage>  
       <NavigationPage Title="Settings"   IconImageSource="settings.png" >  
           <x:Arguments>  
               <local:SettingsPage Title="Settings" />  
           </x:Arguments>  
       </NavigationPage>  
        
     
         
   </TabbedPage>  

=================
Prism update=======================

If I use path/to/MainPage in the Command, it worked as normal.

   <StackLayout HorizontalOptions="Center"  
                    VerticalOptions="Center">  
           <Label Text="Page 1" />  
           <Button Text="Go to MainPage"  
                   Command="{prism:NavigateTo 'path/to/MainPage'}" />  
       </StackLayout>  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Thanks @Leon Lu (Shanghai Wicresoft Co,.Ltd.) I tried it but it breaks the navigation.
This no longer works:

   <CollectionView.ItemTemplate>  
                                   <DataTemplate>  
                                       <customViews:ListingCard Listing="{Binding .}">  
                                           <customViews:ListingCard.GestureRecognizers>  
                                               <TapGestureRecognizer Command="{prism:NavigateTo Name={x:Static misc:Pages.ListingDetails}}"  
                                                                     CommandParameter="{Binding .}" />  
                                           </customViews:ListingCard.GestureRecognizers>  
                                       </customViews:ListingCard>  
                                   </DataTemplate>  
                               </CollectionView.ItemTemplate>  

I can see that the constructor of ListingDetailsViewModel is invoked, but the app does not navigate to that page anymore.