RelativeLayout.HeightConstraint не заполняет мой RelativeLayout

Question

Я использую заголовок ListView и хочу заполнить фотографию, размер которой будет составлять 1/3 от размера экрана, поэтому внутри моего заголовка ListView я установил следующий код:

<ListView.Header >
             <RelativeLayout BackgroundColor="Red">
                <StackLayout
                  BackgroundColor="Gainsboro"
                  RelativeLayout.WidthConstraint ="{ConstraintExpression
                  Type=RelativeToParent,
                  Property=Width,
                  Factor=1}"
                  RelativeLayout.HeightConstraint ="{ConstraintExpression
                  Type=RelativeToParent,
                  Property=Height,
                  Factor=0.3}"/>
            </RelativeLayout>
        </ListView.Header>

Вот мой результат

Как я могу исправить, чтобы соответствовать stackLayout внутриlativelayout?

Answer 1

В общем, я бы предложил против RelativeLayout и в пользу Grid. Если вам нужно иметь изображение в заголовке с высотой 1/3 высоты экрана, тогда вы можете просто поместить изображение внутри заголовка без какого-либо макета. Затем вы можете использовать Xamarin.Essentials.DeviceDisplay, чтобы получить размер экрана и с помощью привязки к вашей модели представления назначить его высоте вашего изображения. В зависимости от соотношения сторон изображения вам может потребоваться соответствующим образом настроить свойство аспекта.

<StackLayout>
   <ListView ItemsSource="{Binding ListViewSource}">
      <ListView.Header>
         <Image HeightRequest="{Binding HeaderHeight}"
                Source="image"
                Aspect="Fill"/>
      </ListView.Header>
      <ListView.ItemTemplate>
         <DataTemplate>
            <TextCell Text="{Binding Text}"/>
         </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>
</StackLayout>

public double HeaderHeight => DeviceDisplay.MainDisplayInfo.Height * 0.33 / DeviceDisplay.MainDisplayInfo.Density;