Xamarin Add image to navigation bar - xamarin

Question

I have a problem. I created a Master Detail Page with Shell. But now I want to add an Image to the Navigation bar, so just to be clear: An Image... Not an Icon
Here is my code now:
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.SideMenuItems" BackgroundColor="#212121"
FlyoutBackgroundColor="#212121">
<Shell.FlyoutHeader>
<local:SideMenuHeader />
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" Padding="30, 15, 0, 15">
<Image Source="{Binding Icon}" HeightRequest="35" />
<Label Text="{Binding Title}" TextColor="White" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" />
</StackLayout>
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Title="SideNav"
Shell.TabBarIsVisible="False"
FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Home" Icon="Home_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}"/>
<ShellContent Title="Search" Icon="Search_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent Title="Messages" Icon="Chats_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent Title="Favorites" Icon="Favorites_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent Title="Settings" Icon="Settings_Dark.png" IsTabStop="true" ContentTemplate="{DataTemplate local:HomePage}" />
</FlyoutItem>
</Shell>
How can I add an image to the top navigation bar in the center?
I tried this:
<Shell.TitleView>
<Image Source="Title_Dark.png" HeightRequest="30" VerticalOptions="CenterAndExpand" />
</Shell.TitleView>
But no image on screen?

Answer 1

If you display view in navigation bar for shell, you add the following code to the HomePage ComtentPage.
<ContentPage ...>
<Shell.TitleView>
<Image Source="xamarin_logo.png"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Shell.TitleView>
...
The Shell class defines the TitleView attached property, of type View, that enables any Xamarin.Forms View to be displayed in the navigation bar.
While this property can be set on a subclassed Shell object, it can also be set on any pages that want to display a view in the navigation bar.
For more detailed info, you can take a look:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/configuration
Update：
If you want to change navigation bar height size, you can called android:actionBarSize with your height in your style.xml file in Android project.
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from https://aka.ms/material-colors -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
<item name="android:actionBarSize">250dp</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>

Answer 2

I haven't tested, but you should have the ability to use TitleView in XAML with Shell, so add it there.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar

Answer 3

Generally, I set navbar display to false, and create my own navbar view as contentview. So you can customize it whatever you want