XAML: изображение не по центру

Question

В моем приложении мне нужно центрировать изображение по вертикали и горизонтали внутри заголовка ListView.

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

Я не понимаю, почему черное пространство под изображением выше, чем черное пространство над изображением.Я пробовал Grid вместо StackLayout с высотой строк 10, Auto, 10 с тем же результатом.Как я могу это исправить?

Answer 1

Я не понимаю, почему черное пространство под изображением выше, чем черное пространство над изображением.

Я не смог воспроизвести проблему, используя StackLayout в качестве пользователя rootпанель.Верхнее поле изображения и нижнее поле правильные.Может случиться так, что цвет инструмента времени выполнения такой же, как цвет фона, что является визуальной ошибкой.Поэтому я изменяю цвет bg как красный.Для закрытия инструмента времени выполнения вы можете сослаться на эту ссылку .

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

Вместо этого я использовал GridStackLayout с высотой строки 10, Авто, 10 с тем же результатом.Как я могу это исправить?

Если вы используете 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>

Answer 2

Может быть само изображение имеет эффект тени внизу.Попробуйте с другим изображением.