RelativeLayout.HeightConstraint doesnt fill my RelativeLayout

Question

I am using a ListView Header, and i want to fill a photo which it will take place in 1/3 of screen size so inside my ListView Header i have set this code below:

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

Here is my result

How can i fix to match stackLayout inside relativelayout?

You could use `Converter` to binding the 1/3 screen size. Here is the similar thread for your reference. https://stackoverflow.com/questions/58987878/resizing-frame-and-controls-according-to-device-size-suggestions — Wendy Zang - MSFT, May 04 '20 at 09:13

score 0 · Answer 1 · answered May 03 '20 at 14:06

In general I would suggest against a RelativeLayout and in favour of a Grid. If you need to have an image in your header with a height of 1/3 your screen's height then you could just put an Image inside your header without any layout. Then you could use Xamarin.Essentials.DeviceDisplay to get the screen size and through a binding to your viewmodel assign it to your image's height. Depending on you image's aspect ratio you might need to adjust the aspect property accordingly.

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

RelativeLayout.HeightConstraint doesnt fill my RelativeLayout

1 Answers1