xamarinxamarin.formsnavigationbartitleview

How to show Navigationbar 'TitleView' Common for all pages


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>

enter image description here

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

enter image description here

How can I display TitleView common for all pages?


Solution

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

    enter image description here

    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