Xamarin - StackLayout inside NavigationPage.TitleView won't use all space?

Question

I have a TitleView on some of my app's content pages, and I want the StackLayout that contains all the text to fill the available space. However, setting its HorizontalOptions to Fill or FillAndExpand doesn't work like it normally would in a ContentPage, and instead the StackLayout is only as wide as the Labels I have inside it.

My XAML code:

<NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" x:Name="TitleBarLayout">
            <Label Text="PageTitle"
                   TextColor="White"
                   FontSize="20"
                   FontAttributes="Bold"
                   HorizontalOptions="Start"
                   x:Name="PageTitle"/>
            <Label Text="Text1:"
                   FontSize="20"
                   TextColor="LightGray"
                   HorizontalOptions="End"/>
            <Label x:Name="Label1"
                   FontSize="20"
                   TextColor="Black"
                   HorizontalOptions="End"/>
            <Label Text="Text2:"
                   FontSize="20"
                   TextColor="LightGray"
                   HorizontalOptions="End"/>
            <Label x:Name="Label2"
                   FontSize="20"
                   TextColor="Black"
                   HorizontalOptions="End"/>
            <Label Text="Text3:"
                   FontSize="20"
                   TextColor="LightGray"
                   HorizontalOptions="End"/>
            <Label x:Name="Label3"
                   FontSize="20"
                   TextColor="Black"
                   HorizontalOptions="End"/>
        </StackLayout>
    </NavigationPage.TitleView>

So ideally I want the "PageTitle" label to sit right next to the Back arrow, and then have everything else at the other end of the Navigation bar - as you can see I've set HorizontalOptions="Start" for PageTitle, and HorizontalOptions="End" for everything else.

The result of this code is this:

And the desired result is this (edited in Paint):

I have also tried getting the Page's width in C# and setting the Margin for the PageTitle label, as below:

double width = App.Current.MainPage.Width / 4;
PageTitle.Margin = new Thickness (0,0,width,0);

But because my app is designed to be used for any device in portrait or landscape, this causes text wrapping errors on displays that are too small.

Please no recommendations for custom tools unless absolutely necessary.

Make all the Label's Horizontal Options as StartAndExpand or EndAndExpand instead of Start and End. — Nikhil

pinedax pinedax · Accepted Answer · 2019-10-18T05:50:20

You can fix this by changing the HorizontalOptions of the first Label to FillAndExpand or StartAndExpand

<Label Text="PageTitle"
        TextColor="White"
        FontSize="20"
        FontAttributes="Bold"
        HorizontalOptions="StartAndExpand"
        x:Name="PageTitle"/>

This will "force" the rest of the items to move to the End.

Hope this helps.-

Xamarin - StackLayout inside NavigationPage.TitleView won't use all space?

1 Answers