[Shell] TitleView Improvements

[ChasakisD]

Summary

Let's have a Shell with FlyoutBehavior="Disabled" and lets assume the following 2 approaches:

• The first one is when having one ShellItem and many ShellSections(each one has one ShellContent), so we get a BottomNavigationView.
• The second one is when having one ShellItem with one ShellSection with many ShellContents, so we get the TabbedPage.

1. In the first approach (BottomNavigationView) there is no way to set a global TitleView that applies to all the ShellSection. Each page must have it's own TitleView and on switch the TitleView gets re-rendered and it is not a good UX. Maybe am i missing something? I tried to set the Shell.TitleView to the Shell and into the ShellItem but it doesn't seem to work.

2. In the second approach (TopTabs) setting at least at one content the TitleView, it applies everywhere! So no flickering on the TitleView, but it's confusing! If i apply the TitleView to the Page it will work or not? Maybe it depends?

The way I am thinking the Shell is to be able to customize the global TitleView, while giving the opportunity to change the title view on any level. What i mean is:

• If you set the TitleView to a ShellContent, only this one will get the specific TitleView.
• If you set the TitleView to a ShellSection every ShellContent of the Section will get this TitleView, except when the ShellContent get its own.
• If you set the TitleView to a ShellItem every ShellSection will get the TitleView except it gets its own, etc.. I think that I am explaining it well.

API Changes

No notable API changes, since the Shell.TitleView is already an attached property.

Intended Use Case

These will apply to anyone that wants to customize the toolbar!
Parent: #2415

[jfversluis]

Thanks so much for your extensive message here! I don't think this will be something we will do for Forms anymore, but keep your eye on .NET MAUI!

[borrmann]

I think what you want can already be achieved using inheritance.
Instead of setting the TitleView in the AppShell, set it in a BaseContentPage and let your ContentPages inherit from it. You can then override if you want.

Set a BaseContentPage like:

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MySampleApp.Views.NewFolder.BaseContentPage"> <Shell.TitleView> <Grid> <Label Grid.ColumnSpan="2" Text="MY AWESOME TITLE" FontSize="20" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" FontAttributes="Bold" Opacity="1" /> </Grid> </Shell.TitleView> </ContentPage>

And then simply inherit any page like this:

<newfolder:BaseContentPage xmlns:newfolder="clr-namespace:MySampleApp.Views.NewFolder" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MySampleApp.Views.MyPage" x:Name="BrowseItemsPage"> <Grid> <Label >TEST</Label> </Grid> </newfolder:BaseContentPage>

and .cs file:

public partial class MyPage : BaseContentPage { public MyPage() { InitializeComponent(); } }

The page will have MY AWESOME TITLE as title if you don't override it on your page as usual.
Additionally, I would recommend to define a custom TitleView using a contentview that you use in the BaseContentPage as well as in the pages. If you have some components that you always want in your title (e.g. like a activity indicator when you pull data).