I am trying to add a layer that can be any control (for example let's take a Label
) above the Shell
App bar (Navigation bar), so that it will be available on all pages. For this I tried to use TitleView
, which obviously won't fulfills my requirement (see screenshots below).
ATTEMPT
Page1.xaml:
<ContentPage...>
...
<Shell.TitleView>
<StackLayout Spacing="0">
<Label Text="Hello world" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="{Binding Source={x:Reference page1}, Path=Title}"/>
</StackLayout>
</Shell.TitleView>
</ContentPage>
AppShell.xaml:
<Shell...>
...
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="Tab1">
<ShellContent Title="Page1"
ContentTemplate="{DataTemplate local:Page1}"/>
<ShellContent Title="Page2"
ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>
<Tab Title="Tab2">
<ShellContent Title="Page1"
ContentTemplate="{DataTemplate local:Page1}"/>
<ShellContent Title="Page2"
ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>
</FlyoutItem>
</Shell>
So what I am trying to achieve is resumed in 2 points:
- The
Label
should be on top of the whole App bar (FlyoutIcon
+TitleView
), not on top ofTitleView
only, as clarified in the screenshots. - At the same time the original style of the
ContentPage.Title
already in place should not be altered.
Original Page Title
Attempt
Desired Result
Bonus question:
It seems the Shell
App bar is built from two parts FlyoutIcon
and TitleView
. How/where Xamarin.Forms is building the Shell
layout? a brief explanation or pointing to the relevant Class in the XF Github repo will be very appreciated.
Tried using some Shell custom renderers without success.
EDIT
- The appended control should be part of the
Shell
so that I can customize it content depending on the current page. That means also to be covered whenFlyout
is opened.
EDIT 2
The solution may come from the coming feature Shell.AppBar. Meanwhile open for a solution at Android project level.