How to show Navigationbar 'TitleView' Common for all pages

Question

I have added TitleView in MainPage to show on Navigationbar but it shows only for MainPage when I navigate to some other page Navigationbar displaying empty.

Below code I have in MainPage.xaml file

<NavigationPage.TitleView>
<RelativeLayout  HorizontalOptions="Fill" 
    <Image Source="bell.png"  HeightRequest="25" WidthRequest="25" x:Name="imgBell"
           RelativeLayout.YConstraint="{ConstraintExpression
         Type=RelativeToParent,
         Property=Height,
         Factor=0.018,Constant=10}">
        <Image.GestureRecognizers>
            <TapGestureRecognizer  Command="{Binding GetStaffAnnouncementCommand}"></TapGestureRecognizer>
        </Image.GestureRecognizers>
    </Image>

        <Label  FontSize="10" HorizontalTextAlignment="Center"  VerticalTextAlignment="Center"  BackgroundColor="Transparent" Text="2"    TextColor="Red"
                HeightRequest="22" WidthRequest="23" x:Name="labelText">
    </Frame>

</RelativeLayout>
</NavigationPage.TitleView>

When I click on bell icon and move to second page TitleView not displaying at all

How can I display TitleView common for all pages?

Have you placed the Whole Title view code inside second page as well? — MShah, Apr 24 '19 at 12:57
To reduce this effort you can create one common control of Title view and just use that in all other pages, but you have to use in every page where you want to display title view. — MShah, Apr 24 '19 at 12:59
Yeah this can be done but I just want to avoid to have TitleView in all pages. — R15, Apr 24 '19 at 13:02
You can also create common ContentPage with title view and use only that common page where ever required, as you are any how declaring page in your xaml. — MShah, Apr 24 '19 at 13:07

Leon · Accepted Answer · 2019-04-26T08:31:37.843

I wrote a demo about your needs. There is GIF.

You could Write a custom page inherits from 'ContentPage' and add toolbar item to it.

Update

I achieve it with DependencyService, If you want to know more details about how to achieve DependencyService, you could refer to this blog and my code. https://www.xamboy.com/2018/03/08/adding-badge-to-toolbaritem-in-xamarin-forms/

There is code that used DependencyService.

Custom ToolbarPage

 public class ToolbarPage : ContentPage
{
    public ToolbarItem toolbarItem;
    public static int item;
    public ToolbarPage()
    {

        // public ToolbarItem(string name, string icon, Action activated, ToolbarItemOrder order = ToolbarItemOrder.Default, int priority = 0);
         toolbarItem =new ToolbarItem();
        toolbarItem.Icon = "ring2.png";

        toolbarItem.Order = ToolbarItemOrder.Primary;
       // toolbarItem.Text = item+"";
        toolbarItem.Priority = 0;

        toolbarItem.Clicked += ToolbarItem_Clicked;
        ToolbarItems.Add(toolbarItem);
        if (item >= 1)
        {
            DependencyService.Get<IToolbarItemBadgeService>().SetBadge(this, toolbarItem, $"{item}", Color.Red, Color.White);
        }
    }

    private void ToolbarItem_Clicked(object sender, EventArgs e)
    {
        item = item + 1;
        DependencyService.Get<IToolbarItemBadgeService>().SetBadge(this, toolbarItem, $"{item}", Color.Red, Color.White);
    }


}

Main.cs

    public partial class MainPage : ToolbarPage
{
    public MainPage()
    {
        InitializeComponent();
        bt1.Text = ToolbarPage.item.ToString();
        bt1.Clicked += async (o, e) =>
        {

           await Navigation.PushAsync(new HelloToolbarInher());
        };
    }
    protected override async void OnAppearing()
    {
        //You must make a delay,
        await  Task.Delay(100);
        bt1.Text = ToolbarPage.item.ToString();
        DependencyService.Get<IToolbarItemBadgeService>().SetBadge(this, toolbarItem, $"{ToolbarPage.item}", Color.Red, Color.White);
    }
 }

Do not forget to change MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<local:ToolbarPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:NaviagationViewDemo"
         x:Class="NaviagationViewDemo.MainPage">

<StackLayout>
    <!-- Place new controls here -->
    <Button
        x:Name="bt1"
        Text="click"
        ></Button>
</StackLayout>

There is my new demo.

https://github.com/851265601/NewNaviagationViewDemo

Thank you for answer. Your idea is good but writing complex UI is difficult in .cs file. — R15, Apr 25 '19 at 09:37
@Arvindraja I update my answer, and achieved the UI with dependence service. you could refer to it. — Leon, Apr 26 '19 at 08:32

How to show Navigationbar 'TitleView' Common for all pages

1 Answers1