Xamarin Forms Image in NavigationBar not visible

Question

I have a problem. I created a TabbedPage like this:

TabbedBuilder = new TabbedPage
{
    BarBackgroundColor = Color.FromHex("#212121"),
    BarTextColor = Color.White
};
TabbedBuilder.Children.Add(new ImageBuilder());
TabbedBuilder.Children.Add(new ImageTemplates());

And I set the TabbedPage like this:

Navigation.PushAsync(TabbedBuilder);

But now I want to add an image in the center of the navigation bar, so in the ImageBuilder page I added the following code:

<NavigationPage.TitleView>
    <StackLayout VerticalOptions="CenterAndExpand" Orientation="Horizontal">
        <Image Source="Title_Dark.png" HeightRequest="25" />
    </StackLayout>
</NavigationPage.TitleView>

But when I go to that page, no image is in the navigation bar....

What am I doing wrong?

Lucas Zhang - MSFT Lucas Zhang - MSFT · Accepted Answer · 2020-01-03T11:24:35

Since you had set the TitleView of the ContentPage ImageBuilder . You should init it as NavigationPage when add it to the Tabbed Page

TabbedBuilder.Children.Add(new NavigationPage(new ImageBuilder()));
TabbedBuilder.Children.Add(new NavigationPage(new ImageTemplates()));

But in this way , you app will have two Navigation Bar because you had set the MainPage as NavigationPage .

So I suggest that you could change the MainPage instead of call the method PushAsync

App.Current.MainPage = TabbedBuilder;

Normally , we always set the page like TabbedPage and Mater-Detail-Page as MainPage of App instead of a sub-page.

Update

If you do want to navigate between them you could call the method PushModalAsync

Navigation.PushModalAsync(TabbedBuilder);

And pop it when you want to return

Navigation.PopAsync();

Xamarin Forms Image in NavigationBar not visible

1 Answers

Update