Question

我有Xamarin.Forms相对布局的问题，好吧我有4个视图3个图像和一个标签作为照片我附上我的问题我希望第三个图像在第二个图像下面，第二个图像的垂直尺寸是根据image2上的标签大小改变我如何找到Y到image3？ enter image description here

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

如上面的评论中所述，您需要的RelativeLayout约束不能在XAML中表达，但可以在C＃中。

但是，您可以使用网格获得所需的布局。通过将Label和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的，因此在滚动期间可能意味着明显的差异。

Xaml中的相对布局，无法将View放在正确的位置

1 个答案: