Custom TitleView (top bar) in Xamarin.Forms Shell page

Question

I am trying to create custom TitleView (the top bar of Shell page, where the hamburger icon menu is). Now, in designs, I have a few elements in that area - notification bell, info button and user image with name. However, Xamarin.Forms, being xamarin.forms, does not allow an easy override of this element.

How would I go about creating a custom controller for it? I am able to do it for entries, labels, text editors, etc, but nothing I've tried works for TitleView.

Below are images of current state (I can't even change the color of hamburger icon, every png goes white lol)

And what I'm hoping to achieve:

I would really appreciate any pointers and explanations on how to create this custom renderer. Thank you all!

Answer 1

See the official Documentation on how you can customize the TitleView in a Shell application:

Xamarin.Forms Shell pages - Documentation

Sections

1 - Set page colors

• ForegroundColor, of type Color, that defines the color to shade text and icons.

2 - Display views in the navigation bar

The Shell.TitleView attached property, of type View, enables any 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 example, the following XAML shows displaying an Image in the navigation bar of a ContentPage:

You can add ImageButtons in TitleView and use IconTintColorEffect from XamarinCommunityToolkit to change the icon's color:

https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Effects/IconTintColorEffectPage.xaml