XAML: 图片未正确居中

Question

在我的应用程序中，我需要在 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>

不明白为什么图片下方的黑色space比图片上方的黑色space高。我尝试了 Grid 而不是行高 10、Auto、10 的 StackLayout，结果相同。我该如何解决？

Answer 1

可能是图片本身底部有阴影效果。尝试使用不同的图像。

Answer 2

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

我无法通过使用 StackLayout 作为根面板来重现该问题。图像的上边距和下边距是正确的。可能是运行时间工具的颜色和背景颜色一样，属于视觉错误。所以我将背景颜色修改为红色。要关闭运行时间工具，你可以参考这个 .

<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?

如果您使用Grid作为根面板，您需要注意RowSpacing 属性。因为这个属性的默认值是6，会影响布局。请将根网格的 RowSpacing 设置为 0，如下所示。

<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>

XAML: 图片未正确居中

XAML: An image is not centered correctly

xaml

xamarin.forms

xamarin.uwp