Append a control above/upper to the Shell App bar without altering it

1.2k Views Asked by At

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:

  1. The Label should be on top of the whole App bar (FlyoutIcon + TitleView), not on top of TitleView only, as clarified in the screenshots.
  2. At the same time the original style of the ContentPage.Title already in place should not be altered.

Original Page Title

Original Title

Attempt

Attempt

Desired Result

Desired

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 when Flyout is opened.

EDIT 2

The solution may come from the coming feature Shell.AppBar. Meanwhile open for a solution at Android project level.

0

There are 0 best solutions below