CODEWITHSUNDEEP
c#xamarin.formsxamarin.ios
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17472

How to change Navigationbar title irrespective of Tab title

I am setting the page title on the Navigationbar as

public Homework ()
{
   InitializeComponent ();
   Title = "Homework";     
}

This page is a child page of Tabbed page where the Tab already has the Title "Tab1".

Now when I open the Homework.cs page from Tab1, The above code changing Tab title to Homework and the Navigationbar title also changes to "Homework". I don't want to change Tab title.

MyTabbed page code using

   public class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
           this.CurrentPageChanged +=delegate
           {        
             this.Title = this.CurrentPage.Title;
           };     
        }
    }

See some convenient snippets

public App ()
{
    InitializeComponent();
    MainPage = new NavigationPage(new LoginPage());          
}

LoginContentPage button click

btnLogin.Clicked +=async delegate {
 await Navigation.PushAsync(new ParentDashboard(), false);
};

ParentDashboard Containing tabs

public partial class ParentDashboard : MyTabbedPage
{
    public ParentDashboard()
    {
        InitializeComponent();      
        Title="Home"; //upto here title working
    }
}

From now I am clicking on HomewPage as I shown in starting of this question & that is not working. How can I do this?

Upvotes: 5

Views: 1209

Answers (2)

Jasmin
Jasmin

Reputation: 340

It's late to answer this question but I spent some time on this problem and want to share my solution for anyone with the same goals:

  • when a tab is clicked, set the title of the TabbedPage to the child's page title (e. g. "Full title")
  • use tab labels shorter than the child's full page title (e. g. "Title")
  • avoid another layer or navigation stack (suggested by Land Lu - MSFT's answer)

Solution

In the base class for my content pages I added the LongTitle property. This makes it possible to have a longer and a shorter (= default) title of a page.

Suppose childPage1 should have a shorter tab label than its original title. So I changed its Title property to the shorter version ("Title") and set the LongTitle property to the longer version ("Full title")

I add the page to the TabbedPage alongside with the other child page in the constructor of the TabbedPage:

Children.Add(childPage1);
Children.Add(childPage2);

The tab labels are bound to their Title property, which is the shorter one, i. e. "Title" in the case of childPage1. This is as intended.

When tabs are clicked the CurrentPageChanged event is triggered. I use this to update the title of the TabbedPage and set it to the LongTitle if it exists for a child page.

CurrentPageChanged += (s, e) => Title = (CurrentPage as BasePage).LongTitle ?? CurrentPage.Title;

BasePage should be replaced by the appropriate base class for your page.

Upvotes: 0

Ax1le
Ax1le

Reputation: 6641

I guess your project's hierarchy may be like this:

NavigationPage => TabbedPage => children pages.

Then every time the child page's title changes, the TabbedPage's title will change too. Even though we make a custom renderer for this child page, it's hard to change the page's navigationBar's title. Because the NavigationCtroller's root viewController is your tabbed page.

I recommend you to adjust your project's hierarchy, make each child page wrapped by a navigation page like:

enter image description here

In this way, you can set the navigation page's title to adjust the tab item's title and change the navigation bar's title through setting the Homework's title.

You can refer to my code about constructing app():

// This is a TabbedPage
var tabbedPage = new MyTabbedPage();

var firstPage = new MainPage();
// The NavigationPage's Title will be shown on the tab, and firstPage's title can be shown on the navigation bar
tabbedPage.Children.Add(new NavigationPage(firstPage) { Title = "FirstPage" });

var homePage = new Homework();
tabbedPage.Children.Add(new NavigationPage(homePage) { Title = "SecondPage" });

MainPage = tabbedPage;

Upvotes: 2

Related Questions