An image is not centered correctly

dpreznikdpreznik Member ✭✭
edited December 2018 in Xamarin.Forms

Dear experts,

In my application I need to center an image vertically and horizontally within a ListView header.

<ListView x:Name="MenuItemsListView"
          SeparatorVisibility="None"
          HasUnevenRows="true" 
          ItemsSource="{Binding MenuItems}">      
    <ListView.Header>
            <StackLayout BackgroundColor="Black" HeightRequest="100">
                <Image HeightRequest="80" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Source="Assets\logo.png" />
            </StackLayout>
    </ListView.Header>
    <ListView.ItemTemplate>

I don't understand why the black space under the image is higher than the black space above the image. I tried a Grid instead of the StackLayout with row heights 10, Auto, 10 with the same result. How can I fix that?

Thanks,
Dmitriy

Best Answer

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Please provide the image - it may be part of the problem.
    Also realize that all controls have default margin and spacing values. If you want to make sure those are coming in to play, expressly set them to 0.

  • dpreznikdpreznik Member ✭✭
    edited December 2018

    The system does not allow me to insert a link to my picture for some reason:

    You have to be around for a little while longer before you can post links.

    I tried to make StackLayout Margin="0" Spacing="0", and also Image Margin="0", but it did not help.

  • NMackayNMackay GBInsider, University mod

    @dpreznik said:
    The system does not allow me to insert a link to my picture for some reason:

    You have to be around for a little while longer before you can post links.

    How you experimented with the image aspect ratio? the default is fit.

    https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.image.aspect?view=xamarin-forms

  • dpreznikdpreznik Member ✭✭

    How you experimented with the image aspect ratio? the default is fit.

    Just tried it. No option helps.

  • dpreznikdpreznik Member ✭✭

    @ClintStLaurent said:
    Please provide the image - it may be part of the problem.

    I was able to add a picture to my question. Please take a look. Thanks.

  • dpreznikdpreznik Member ✭✭
    edited December 2018

    @ClintStLaurent said:
    Looks like the same 10 px margin to me - as near as I can study from a screen capture.
    The image is not centered perceptually. There is a little asterisk or something in the lower right corner.
    So the image is technically centered when you take that asterisk into consideration.
    Personally I would rework the image looks centered without considering the asterisk.

    Yes, that was it! I did not even notice that thing. It was a registration mark. Thanks!

  • NMackayNMackay GBInsider, University mod

    @ClintStLaurent said:
    Looks like the same 10 px margin to me - as near as I can study from a screen capture.
    The image is not centered perceptually. There is a little asterisk or something in the lower right corner.
    So the image is technically centered when you take that asterisk into consideration.
    Personally I would rework the image looks centered without considering the asterisk.

    Nice catch :)

Sign In or Register to comment.