Xaml의 상대 레이아웃이 올바른 위치에보기를 입력 할 수 없습니다.

Question

Xamarin.Forms 관련 레이아웃에 문제가 있습니다. 네 가지보기가 있습니다. 3 개의 이미지와 하나의 라벨이 사진으로 첨부됩니다. 제 3의 이미지가 필요합니다. 두 번째 이미지 아래 및 두 번째 이미지의 세로 크기가 image2에 대한 레이블의 크기에 따라 변경됩니다. 어떻게 Y를 image3에서 찾을 수 있습니까? XAML 위의 댓글에서 언급 한 바와 같이

enter code here 




<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="demo.AttnamePage" 
      xmlns:local="clr-namespace:demo.MarkupExtensions" > 

    <ListView x:Name="AttNamea" HasUnevenRows="True" ItemSelected="AttNamea_ItemSelected"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <ViewCell> 
       <RelativeLayout> 
        <Image x:Name="Mimage" Source="{Binding image }" Aspect="Fill" 
         RelativeLayout.WidthConstraint= 
          "{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}" 
         RelativeLayout.XConstraint= 
          "{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0}" 
         RelativeLayout.YConstraint= 
          "{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0}"/> 
        <Image Source="{local:Embeddedimage ResourceId=Demo.Images.barM.jpg }" Aspect="Fill" 
         RelativeLayout.WidthConstraint= 
          "{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}" 
         RelativeLayout.YConstraint= 
          "{ConstraintExpression Type=RelativeToView,ElementName=Mimage,Property=Height,Factor=1}" 
         RelativeLayout.HeightConstraint= 
          "{ConstraintExpression Type=RelativeToView,ElementName=label1,Property=Height,Factor=1}"/> 
        <Label x:Name="label1" Text="{Binding attractionName}" TextColor="White" FontSize="16" HorizontalOptions="Center" 
         verticalOptions="Center" 
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}" 
         RelativeLayout.YConstraint= 
          "{ConstraintExpression Type=RelativeToView,ElementName=Mimage,Property=Height,Factor=1}"/> 
        <Image Source="{local:Embeddedimage ResourceId= demo.Images.barD.jpg }" Aspect="Fill" 
         RelativeLayout.WidthConstraint= 
          "{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}" 
         RelativeLayout.YConstraint= 
          "{ConstraintExpression Type=RelativeToView,ElementName=label1,Property=Y,Constant=40}"/> 
        </RelativeLayout> 

       </ViewCell> 


      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

</ContentPage> 

Answer 1

에서

코드 enter image description here는 RelativeLayout의는 XAML에서 표현할 수없는이 필요하지만, C#으로 할 수있다 제약 조건.

그러나 그리드를 사용하여 원하는 레이아웃을 얻을 수 있습니다.

<ListView x:Name="AttNamea" HasUnevenRows="True" ItemSelected="AttNamea_ItemSelected"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 

       <Image x:Name="Mimage" Source="{Binding image }" Aspect="Fill" Grid.Row="0"/> 

       <Image Source="{local:Embeddedimage ResourceId=Demo.Images.barM.jpg }" Aspect="Fill" Grid.Row="1"/> 

       <Label x:Name="label1" Text="{Binding attractionName}" TextColor="White" FontSize="16" HorizontalOptions="Center" 
        verticalOptions="Center" Grid.Row="1"/> 

       <Image Source="{local:Embeddedimage ResourceId= demo.Images.barD.jpg }" Aspect="Fill" Grid.Row="2"/> 

       </Grid> 

      </ViewCell> 

     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Xamarin.Forms 성능 지침 (https://developer.xamarin.com/guides/xamarin-forms/deployment-testing/performance/#optimizelayout)을하는 경우 RelativeLayout의를 피하는 제안 : 원하는대로 라벨과 같은 행에 barM.jpg 이미지를 할당하여, 그들은, 중첩됩니다 CPU가해야하는 작업량 때문에 가능합니다. ListView 용이므로 스크롤하는 동안 눈에 띄는 차이가있을 수 있습니다.