Xamarin.forms: [Spec] Shell/NavigationPage TitleView

[samhouts]

NavigationPage/Shell TitleView

Utilize our current LayoutOptions to indicate how you want a TitleView to layout on the screen. All work done here should be generalized so that it applies to Navigation.TitleView as well

These will have no effect as they only apply to cases where the parent is a stack layout

CenterAndExpand
EndAndExpand
FillAndExpand

Realistically users should only need to use Center and Fill

Center

VerticalOptions

When used it will center the rendered view inside the given title view container so that the margin above and below the content appear equal

HorizontalOptions

Centered on the device screen. View will have a width equal to measured content

Fill

VerticalOptions

This is the current behavior. The Layout will just layout inside all available vertical space. In a perfect world if the measured height of the supplied layout exceeds the min height of the navigation bar then the navigation bar should be resized to match the height of the TitleView. If this is extremely difficult to get working we can look at doing that for a second PR.

HorizontalOptions

This will cause the title view to take up the entire width of the header on the device. So the titleview layout will overlap the backbutton, hamburger, etc... We can detect this layout option and just not render toolbaritems/hamburger/etc..

Start

VerticalOptions

View will measure vertically to the size of the content and will layout against the top edge of the allotted TitleView space.

HorizontalOptions

View will measure horizontally to the size of the content and will layout against the left edge of the allotted TitleView space. For example on iOS this will just cause the view to layout against the hamburger

End

VerticalOptions

View will measure vertically to the size of the content and will layout against the bottom edge of the allotted TitleView space.

HorizontalOptions

View will measure horizontally to the size of the content and will layout against the right edge of the allotted TitleView space. For example on iOS this will just cause the view to layout against the hamburger
Template level control of the entire experience.

Additional Work to look at while implementing these changes

• Shell needs to allow the TitleView to be settable at all levels #4650
• If the measured height of the titleview exceeds the navigation bar min height than the navigationbar should resize to the measured content

XAML Example

This will center the title vertically within the given titleview space and horizontally on the device screen

<Shell.TitleView>
     <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
          <Label Text="Title"  />
     </StackLayout>
</Shell.TitleView>

---

Difficulty : medium

[jrahma]

The only issue I am facing is the Back Button area [Left side] which is not accessible by the TitleView as you can see in below image even with setting the a FillAndExpand StackLayout

When I say Left side you should also consider when the FlowDirection is RightToLeft then this area will be at the Right side.

[PureWeen]

https://github.com/xamarin/Xamarin.Forms/issues/9939

[jrahma]

@samhouts Is this going to be available soon to fix the empty space in the left side?

[samhouts]

This is on the backlog. I don't currently have an estimate of when we may begin work on this item. Thank you for your patience!

[oscarjaergren]

1+ on this