CODEWITHSUNDEEP
xamarin.forms
requenaxii
requenaxii

Reputation: 131

How to dynamically change the navigation bar title when ContentView changes?

I'm working on a new very basic application with Xamarin.Forms and I have a doubt... I can't figure it out how to do that since I do not have much experience with Xamarin at all.

I got a ContentPage where I fit some ContentView based on which tab I clicked, change the navigation title in the first one is easy since I can use Title="[introduce any title]" but I don't have this property on the views.

This is my code basically, I added the namespace of my view I want to add like this:

<ContentPage
...
xmlns:views="clr-namespace:Your.Name.Space"
...>'

Then in my pages content, I can use it like this:

<views:NameOfView />

I'm using a custom tab layout for the bottom navigation.

I hope anyone of you can put on the correct way with that.

Thanks.

Upvotes: 4

Views: 5838

Answers (2)

Sharada
Sharada

Reputation: 13591

The recommended way to implement this would be to have a PageTitle property on your viewmodel - which is kept in sync with current content-view; and hence its corresponding title.

But if you want to implement this at view level only; then you can do that by introducing a custom bindable property with binding-mode as OneWayToSource in your content view. For eg: 

public class NavigationView : ContentView
{
    public static readonly BindableProperty TitleProperty =
                                    BindableProperty.Create("Title",
                                        typeof(string),
                                        typeof(NavigationView),
                                        defaultValue: null,
                                        defaultBindingMode: BindingMode.OneWayToSource);

    public string Title
    {
        get => (string)GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }
}

And, bind your custom property to ContentPage title by using a self reference. For eg: 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    ....
    x:Name="_self"
    Title="{Binding Path=Content.Title, Source={x:Reference _self}}">

Or, add binding to custom view to make full use of binding-mode: 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    ...
    x:Name="_self">
    ...
    <local:NavigationView Title="{Binding Path=Title, Source={x:Reference _self}}">

Usage example

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:TitleView" 
    x:Class="TitleView.TitleViewPage"
    x:Name="_self"
    Title="{Binding Path=Content.Title, Source={x:Reference _self}}">
    <local:NavigationView Title="This is page-1">
        <Button Text="Go to page-2" Clicked="Handle_Clicked" />
    </local:NavigationView>
</ContentPage>

Code-behind:

public partial class TitleViewPage : ContentPage
{
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        this.Content = new NavigationView { 
            Title = "This is page-2", 
            Content = new Button { Text = "Go back to page-1", IsEnabled = false } };
    }

    public TitleViewPage()
    {
        InitializeComponent();
    }
}

enter image description here

EDIT 1: Also added some code to illustrate how to define binding from content view to page.

Upvotes: 4

Tomislav Erić
Tomislav Erić

Reputation: 215

As Gerarld Versluis said, you have to set the Title on the ContentPage. Just create two ContentPages for each Tab one ContentPage. Then create Binding for each ContentPage.

<ContentPage Title="{Binding PageTitleFirstPage}" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="stackoverflow.AboutPage" xmlns:vm="clr-namespace:stackoverflow;">
</ContentPage>

And for the Second ContentPage the same, you can also use a ContentView inside the ContentPage if you want!

<ContentPage Title="{Binding PageTitleSecondPage}" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="stackoverflow.AboutPage" xmlns:vm="clr-namespace:stackoverflow;">
</ContentPage>

In the ViewModel set a property with your desired string:

public string PageTitleSecondPage => "Second Tab";

Update I read that you want to change the Title by switching between ContentViews. Can you please show us your code? Because you could easily set your PageTitle there where your ContentView switches. Let's say you are switching your ContentView by a Click, you could there set the PageTitle. But you also have to notify the View, that this property has changed.

Upvotes: 1

Related Questions