1

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.

Cfun
  • 8,442
  • 4
  • 30
  • 62
  • According to your description, you want modify Shell layout. I search some info, but don't find any solution, you can try to use custom render to do this. – Cherry Bu - MSFT Oct 19 '20 at 07:47
  • @CherryBu-MSFT i already searched about custom renderer but i cannot find how to achieve that. Which method to override. There is little official info/documentation about that, only a list of virtual methods name that can be override. Also a good understanding of the Shell layout structure is required in order to achieve that (adding whole layer above). – Cfun Oct 19 '20 at 11:36
  • 1
    Yes, there is little info about Shell, I still search some way to do this, if I find a way to do it, I will share it here. If you have a way to do it, please also share your solution. – Cherry Bu - MSFT Oct 22 '20 at 07:19
  • @CherryBu-MSFT I am now trying to understand [this](https://stackoverflow.com/q/64505934/5228202) because I believe hamburger button is part of Toolbar. – Cfun Oct 23 '20 at 19:15
  • @Anything update? – Cherry Bu - MSFT Oct 30 '20 at 07:15
  • @CherryBu-MSFT unfortunately no answer to my other question yet about `Shellcontent_Toolbar`. Also I am waiting for a reply from xf dev team regagding the implementation of `Shell.AppBar` like mentioned in my post edit link. – Cfun Oct 30 '20 at 08:09
  • You can also create new thread at github, and if you have any update, please share here, thanks. – Cherry Bu - MSFT Nov 02 '20 at 05:38

0 Answers0