Xamlの相対レイアウトは、正しい場所に表示を配置することはできません

Question

私はXamarin.Forms相対的なレイアウトに問題があります、私は4つのビューを持っています3イメージと1つのラベルを写真として私は私の質問を添付します。 2番目の画像の下の2番目の画像の縦のサイズは、画像2のラベルのサイズに応じて変化しています。上記のコメントで述べたように、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＃ですることができます。

ただし、グリッドを使用して必要なレイアウトを取得できます。必要に応じて、同じ行にラベルとbarM.jpgイメージを割り当てることで、彼らは、オーバーレイされます

<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を避け示唆しますCPUの作業量のせいで可能です。これはListView用であるため、スクロール時に大きな違いが生じる可能性があります。