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

user_8469761 0
Viewed 4605

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)

Current state

And what I'm hoping to achieve:

Desired outcome

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

xamarin.forms android xaml ios c#
2 Answers

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

user_126853020

Custom Controllers are recommended when you want to change/override how an element behaves. What you need to do is to customize the Title View, an element that you can define easily on the same way you customize the Content in a View.

All you need to do is this:

<!-- YOUR XAML -->
<NavigationPage.TitleView>
   <Grid>
      <!-- YOUR CONTENT -->
   </Grid>
</NavigationPage.TitleView>

I'd like to say that you might keep tight to navigation bar height, there are some restrictions there you need to follow.

If you need kind of a template to reuse this title bar in several places, then you might need a Control Template.

You might visit these links:

Displaying views in the navigation bar

Control Templates in Xamarin Forms

user_103818130
Related