[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

StartAndExpand
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 [Shell] TitleView Improvements #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]

#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

[kirankumar4vr]

With Xamarin Forms 5.0.0.2012 update, I started observing that HorizontalOptions="End" or "EndAndExpand" are not working properly on iOS in the Shell title view. This looks fine on Android. Below are the screenshots of the shell title view with an image in stacklayout.

Below is the Xaml

<Shell.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            <Label Text="{Binding Title}" HorizontalOptions="Start"/>
            <Image Source="icon_feed.png" HorizontalOptions="EndAndExpand" Aspect="AspectFit" HeightRequest="40"/>
        </StackLayout>
    </Shell.TitleView>

this was working fine in Xamarin.Forms 4.0 Version.
I tried multiple workarounds like using a grid, right margin, etc but none are working.

[gandhadsanjay]

With Xamarin Forms 5.0.0.2012 update, I started observing that HorizontalOptions="End" or "EndAndExpand" are not working properly on iOS in the Shell title view. This looks fine on Android. Below are the screenshots of the shell title view with an image in stacklayout.

Below is the Xaml

<Shell.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            <Label Text="{Binding Title}" HorizontalOptions="Start"/>
            <Image Source="icon_feed.png" HorizontalOptions="EndAndExpand" Aspect="AspectFit" HeightRequest="40"/>
        </StackLayout>
    </Shell.TitleView>

this was working fine in Xamarin.Forms 4.0 Version.
I tried multiple workarounds like using a grid, right margin, etc but none are working.

[gandhadsanjay]

With Xamarin Forms 5.0.0.2012 update, I started observing that HorizontalOptions="End" or "EndAndExpand" are not working properly on iOS in the Shell title view. This looks fine on Android. Below are the screenshots of the shell title view with an image in stacklayout.


Below is the Xaml

<Shell.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            <Label Text="{Binding Title}" HorizontalOptions="Start"/>
            <Image Source="icon_feed.png" HorizontalOptions="EndAndExpand" Aspect="AspectFit" HeightRequest="40"/>
        </StackLayout>
    </Shell.TitleView>

this was working fine in Xamarin.Forms 4.0 Version.
I tried multiple workarounds like using a grid, right margin, etc but none are working.

I was facing same problem, tried many things nothing worked and finally have downgrade XF to v5.0.0.1931

[shivendramca10]

Hi I am using Shell.TitleView for showing logo and Shell.SearchHandler for Searching but in Android App show Shell.SearchHandler and TitleView did not show can we set NavigationPage height that I will show Title View and Search.

[jfversluis]

Hey all, thank you for your input on this! I don't think there will be much changes in this area for Forms anymore. Keep your eye on .NET MAUI and see what is happening there. Maybe this is already better or make sure to open proposals there for things you're interested in. Thanks!