如何显示所有页面的通用导航栏“ TitleView”

时间:2019-04-24 12:24:11

标签: xamarin xamarin.forms navigationbar titleview

我在TitleView中添加了MainPage以便在Navigationbar上显示,但是当我导航到其他显示空白的页面MainPage时,它仅对Navigationbar显示。

MainPage.xaml 文件中的以下代码

<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

当我点击响铃图标并移至第二页TitleView根本不显示

enter image description here

如何显示所有页面共有的TitleView

1 个答案:

答案 0 :(得分:1)

我写了一个有关您需求的演示。 有GIF。

enter image description here

您可以编写一个自“ ContentPage”继承的自定义页面,并向其中添加工具栏项。

更新

我通过DependencyService实现了这一目标,如果您想了解有关如何实现DependencyService的更多详细信息,可以参考此博客和我的代码。 https://www.xamboy.com/2018/03/08/adding-badge-to-toolbaritem-in-xamarin-forms/

有些代码使用DependencyService

自定义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);
    }
 }

不要忘记更改 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>

有我的新演示。

https://github.com/851265601/NewNaviagationViewDemo