Xamarin Forms Shell TitleView does not center image

Question

I have an app that uses the new Shell in Xamarin.Forms. I added the following code to one of my pages in an attempt to use the TitleView area to display my app header image centered. (FYI - I have tried Center for both of the alignment options and it made no difference.)

<Shell.TitleView>
    <Image Source="UCIApp.png"
           HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand" />
</Shell.TitleView>

What I get after doing this is the image in the title bar but centered in the space the excludes the hamburger button on the left as shown below:

What I would prefer is it centered regardless of the space the hamburger menu takes up looking something like this:

Any suggestions?

ALSO - Putting the image in the TitleView is causing it to be shrunk down. Is there any way to avoid that?

Answer 1

Yes, design fail and there is no option customization. I prefer Grid for like this problems. You can use column or row with percentage.

Default place.

<Shell.TitleView>
    <Grid>
        <ffimageloadingsvg:SvgCachedImage 
            Source="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"
            Margin="10"/>
    </Grid>
</Shell.TitleView>

In this example 4/5 unit first column and 1/5 unit second column (* sign presents percentage or divide).

<Shell.TitleView>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <BoxView BackgroundColor="Yellow"/>
        <BoxView Grid.Column="1" BackgroundColor="LightGoldenrodYellow"/>
    </Grid>
</Shell.TitleView>

Then add image text or control to prefered layout (image control default column is 0).

<Shell.TitleView>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <ffimageloadingsvg:SvgCachedImage 
            Source="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"
            Margin="10"/>
    </Grid>
</Shell.TitleView>

Edit: Add min height to grid or image control for prevent resize content. Also ffimageloadingsvg is third party package for loading svg files.

Answer 2

I think that's the designed problem about Shell Title View ,you can submit it as a feature request in GitHub here .

What I would prefer is it centered regardless of the space the hamburger menu takes up looking something like this: ... Any suggestions?

The title view already been placed center in Title View . However , it looks like not center in the whole Navigation Bar . Have a look at follow code and effect .

<Shell.TitleView>
    <StackLayout HorizontalOptions="CenterAndExpand"
                 VerticalOptions="CenterAndExpand"
                 BackgroundColor="Accent">
        <Image Source="xamarin_logo.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</Shell.TitleView>

The effect :

You can see that the content of Title View , And the icon already been center in Title View .Because of existing meun icon , the weight of Title View is not equal with Navigation Bar .

Putting the image in the TitleView is causing it to be shrunk down

Refer to above effect , you can see that The size of the icon is adapted to the Title View display, and you can see the size of the Title View, so your icon is unlikely to exceed the display range of the Title View.