XAML: An image is not centered correctly

Question

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>

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?

Are you looking for `VerticalContentAlignment` / `HorizontalContentAlignment` on your `StackLayout`? — Chris W., Dec 17 '18 at 21:58

Nico Zhu · Answer 1 · 2018-12-18T06:55:59.890

I don't understand why the black space under the image is higher than the black space above the image.

I could not reproduce the issue by using StackLayout as root panel. The image's top margin and the bottom margin is correct. It may be that the color of the runtime tool is the same as the background color, which is a visual error. So I modify the bg color as red. For close the run time tool you could refer this link.

<StackLayout BackgroundColor="Black" HeightRequest="100">
  <Image HeightRequest="80" HorizontalOptions="CenterAndExpand" 
    VerticalOptions="CenterAndExpand" Source="Assets\logo.png" />
</StackLayout>

I tried a Grid instead of the StackLayout with row heights 10, Auto, 10 with the same result. How can I fix that?

If you use Grid as root panel, you need to notice RowSpacing property. Because the default value of this property is 6 and it will effect the layout. Please set the root grid's RowSpacing as 0 like the following.

<Grid BackgroundColor="Red" HeightRequest="100" RowSpacing="0" >
    <Grid.RowDefinitions>
        <RowDefinition Height="10"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <BoxView Grid.Row="0" BackgroundColor="Black" VerticalOptions="FillAndExpand"  />
    <Image Grid.Row="1" HeightRequest="80" HorizontalOptions="CenterAndExpand" 
   VerticalOptions="CenterAndExpand" Source="Assets\bc1.jpg" />
    <BoxView  Grid.Row="2" BackgroundColor="Blue" VerticalOptions="FillAndExpand" />
</Grid>

score 0 · Accepted Answer · answered Dec 18 '18 at 05:36

0

May be the image itself has a shadow effect at the bottom. Try with a different image.

answered Dec 18 '18 at 05:36

Abdul Gani

679
3
7

Yes, that was the registration mark at the bottom that I did not notice. – David Shochet Dec 18 '18 at 14:34

XAML: An image is not centered correctly

2 Answers2