Question

我想设计为随附的屏幕截图。需要添加两个图像图像1和图像2。enter image description here

Answer 1

您可以使用相对布局来重叠图像

<RelativeLayout>  

<BoxView x:Name="Boxview1" BackgroundColor="Fuchsia"   
        RelativeLayout.WidthConstraint="{ConstraintExpression  
        Type=RelativeToParent,  
        Property=Width,  
        Factor=1}"  
        RelativeLayout.HeightConstraint="{ConstraintExpression  
        Type=RelativeToParent,  
        Property=Height,  
        Factor=0.3}"></BoxView>  

<BoxView BackgroundColor="Lime"  
         RelativeLayout.YConstraint="{ConstraintExpression  
    Type=RelativeToView,  
    ElementName=Boxview1,  
    Property=Height,  
    Factor=0.9,  
    }"  
      RelativeLayout.XConstraint="{ConstraintExpression  
    Type=RelativeToView,  
    ElementName=Boxview1,  
    Property=Width,  
    Factor=0.5,  
    }"     
         ></BoxView>

如果您遇到任何问题，请告诉我，我将进行设计并发布代码。

Answer 2

您可以使用AbsoluteLayout，也可以将StackLayout与负Margin一起使用。

Answer 3

如果将项目添加到网格（行和列相同），则它们将按照它们添加到视图的顺序重叠。

<Grid>
    <BoxView BackgroundColor="Red"/>
    <BoxView BackgroundColor="Blue"/>
    <BoxView BackgroundColor="Green"/>
</Grid>

在这个非常简单的示例中，红色框将在底部，蓝色框然后是绿色框在其底部。您可以将HorizontalOptions和VerticalOptions以及Margin值一起使用来微调视图。

如果您从代码隐藏中添加元素，这也适用。

尤其是在使用ListViews时，我会推荐这种方法，因为RelativeLayout或AbsoluteLayout需要大量的布局时间，这将乘以列表中项目的数量。

如何在Xamarin.forms中重叠图像或布局

3 个答案: