Question

在RelativeLayout内部我想在StackLayout的顶部显示一些元素，在另一个StackLayout的屏幕底部显示一些元素。（我使用相对因为我还有一个图像将与顶部的部分重叠）如何将底部StackLayout约束设置为与父布局的底部相关？

这是我尝试过的，但它不起作用：

<RelativeLayout x:Name="Login" BackgroundColor="#f6f6f6">
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" BackgroundColor="White"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant=0}"
    >

        <Image Source="ACSBanner.png" VerticalOptions="Center" HorizontalOptions="Center" />
    </StackLayout>

    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
        <Label Text="Sample Text For Bottom" FontSize="Large" TextColor="Black" FontAttributes="Bold"/>
    </StackLayout>

</RelativeLayout>

Answer 1

你需要做的事情如下（我自己使用代码隐藏，但模式仍然适用）：

// Create your layouts
var layout = new RelativeLayout ();
var topStack = new StackLayout();
var bottomStack = new StackLayout();

// Define your views
var image = new Image
{
    Source = "ACSBanner.png"
};

var label = new Label 
{
    Text = "Sample text for bottm"
};

// Add the View(s) to your StackLayout(s)
topStack.Children.Add(image);
bottomStack.Children.Add(label);

// Add your top stack to the top of the view
layout.Children.Add(topStack,
widthConstraint: Constraint.RelativeToParent(parent => 
{ 
    return parent.Width; 
}),
yConstraint: Constraint.RelativeToParent(parent => 
{
    return parent.Y; 
}));

// Add your bottom stack to the bottom of the view
layout.Children.Add(bottomStack,
widthConstraint: Constraint.RelativeToParent(parent => 
{ 
    return parent.Width; 
}),
yConstraint: Constraint.RelativeToParent(parent => 
{
    // Find the view of the parent and substracting the height of the View which is to be positioned in the bottom

    return parent.Height - bottomStack.Height; 
}));

Content = relativeLayout;

将堆栈与RelativeLayout的底部对齐？

1 个答案: