[英]Stick Layout in Xamarin Forms to bottom
I'm making an application in Xamarin forms but I have some trouble sticking a layout to the bottom of the device.我正在以 Xamarin 形式制作应用程序,但在将布局粘贴到设备底部时遇到了一些麻烦。 I thought an AbsoluteLayout would work, but I cannot grasp how it works.
我认为 AbsoluteLayout 会起作用,但我无法理解它是如何工作的。 So I made a RelativeLayout which I filled with the elements I wanted to fill but now I cannot seem to get it working on sticking to the bottom of the device at all time.
所以我制作了一个 RelativeLayout 用我想要填充的元素填充但现在我似乎无法让它一直粘在设备的底部。
Below is a screenshot to make things hopefully a little bit more clear.下面是一个截图,希望能让事情更清楚一点。 I have a stacklayout which I fill with the headerlayout and the contentlayout.
我有一个 stacklayout,我用 headerlayout 和 contentlayout 填充它。 But if I just add the footerlayout to the stacklayout, it will not be sticked to the bottom of the page but (logically) just behind the previous child.
但是如果我只是将页脚布局添加到堆栈布局中,它不会被粘贴到页面的底部,而是(逻辑上)在前一个孩子的后面。 Now I think an Absolutelayout would do the trick, but I cannot seem to grasp the functionality and the Layoutflags and bounds of it.
现在我认为 Absolutelayout 可以解决问题,但我似乎无法掌握它的功能以及 Layoutflags 和边界。 Could someone help me out?
有人可以帮我吗?
<StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!-- top controls -->
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!-- middle controls -->
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<!-- bottom controls -->
</StackLayout>
</StackLayout>
Make sure to have no more than one child with Expand
options for best performance.确保只有一个孩子拥有最佳性能的
Expand
选项。
You can use VerticalOptions to send layout to bottom.您可以使用 VerticalOptions 将布局发送到底部。
var stacklayout = new stackLayout()
{
VerticalOptions = LayoutOptions.EndAndExpand
Children = {
//your elements
}
}
Within a RelativeLayout I got the best results with defining the Height- and Y-Constraint.在相对布局中,我通过定义高度和 Y 约束获得了最好的结果。
<RelativeLayout>
<StackLayout VerticalOptions="Start" BackgroundColor="Green"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}">
<!-- Top Content -->
<Button Text="Top Button" Clicked="Button_OnClicked" />
</StackLayout>
<StackLayout VerticalOptions="Center" BackgroundColor="Aqua"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.30}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}">
<!-- Mid Content -->
<Button Text="Mid Button" Clicked="Button_OnClicked" />
</StackLayout>
<StackLayout VerticalOptions="End" BackgroundColor="Yellow"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}">
<!-- Bottom Content -->
<Button Text="Bottom Button" Clicked="Button_OnClicked" />
</StackLayout>
</RelativeLayout>
Results:结果:
Have you figured it out yet?你已经想通了吗? If not, there is a few ways you could accomplish this: Note that i've got the same problem my self, but this is my theory:
如果没有,有几种方法可以做到这一点:请注意,我自己也遇到了同样的问题,但这是我的理论:
So that you could have a StackLayout in which you populate it with three "main childeren".这样您就可以拥有一个 StackLayout,在其中用三个“主要孩子”填充它。 The first could be a absolute or relative layout (I don't know the difference that well yet).
第一个可能是绝对或相对布局(我还不太清楚其中的区别)。 In theory you should be able to add a element to the absolute layout and then add elements on top of the first element, because absolute layout uses a z-index, which works like layers in photoshop.
从理论上讲,您应该能够将元素添加到绝对布局,然后在第一个元素的顶部添加元素,因为绝对布局使用 z-index,其工作方式类似于 photoshop 中的图层。 So in other words do it like this:
所以换句话说,这样做:
var topAbsoluteLayout = new AbsoluteLayout();
topAbsoluteLayout.Children.Add(header, new Point(0, 0));
topAbsoluteLayout.Children.Add(element1, new Point(x,y));
topAbsoluteLayout.Children.Add(element2, new Point(x, y));
Then you should do the same thing with the footer and remember to add topAbsoluteLayout to the Childeren in the StackLayout.然后你应该对页脚做同样的事情,记得在 StackLayout 中将 topAbsoluteLayout 添加到 Childeren。
I hope this helps you out我希望这可以帮助你
Here's a class I use to automate this.这是我用来自动执行此操作的类。 There's plenty of additions you can make by extending the class to having a scrollable center section (so it doesn't overlap the bottom if too long) etc!
通过将类扩展为具有可滚动的中心部分(因此如果太长,它不会与底部重叠)等,您可以进行大量添加!
public class CakeLayout : StackLayout
{
public CakeLayout()
{
TopStack = new StackLayout // TOP stack
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.Start
};
CenterStack = new StackLayout // CENTER stack
{
VerticalOptions = LayoutOptions.CenterAndExpand
};
BottomStack = new StackLayout // BOTTOM stack
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.End
};
Children.Add(TopStack);
Children.Add(CenterStack);
Children.Add(BottomStack);
}
public StackLayout BottomStack { get; private set; }
public StackLayout CenterStack { get; private set; }
public StackLayout TopStack { get; private set; }
}
Then to use this as a page, for example:然后将此用作页面,例如:
public class MyPage
{
public MyPage()
{
CakeLayout cakeLayout = new CakeLayout();
cakeLayout.TopStack.Children.Add(new Label { Text = "Hello Cake" });
cakeLayout.CenterStack.Children.Add(MyListView);
cakeLayout.BottomStack.Children.Add(MyButton);
// Assign the cake to the page
this.Content = cakeLayout;
...
}
...
}
I figured it out:我想到了:
I used a StackLayout, which contains the three main Childeren我使用了一个 StackLayout,它包含三个主要的 Childeren
var stack = new StackLayout {
Children =
{
_header,
_grid,
_footer,
}
};
And then you should add the header as a AbsoluteLayout and remember to use the:然后你应该将标题添加为 AbsoluteLayout 并记住使用:
{
AbsoluteLayout.SetLayoutFlags(_imageYouWantToUse, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(_imageYouWantToUse, new Rectangle(x, y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
_headerAbsLayout.Children.Add(_imageYouWantToUse);
}
And for the main grid or the main content, you should use a grid inside a StackLayout, so that you're sure that the layout is vertical (Orientation, is the right one to use here).对于主网格或主要内容,您应该在 StackLayout 中使用网格,这样您才能确定布局是垂直的(Orientation,在这里使用是正确的)。
And do the same thing for the footer and i guess you're good to go对页脚做同样的事情,我想你很高兴去
it's just that simple就这么简单
AbsoluteLayout.SetLayoutFlags(footer, AbsoluteLayoutFlags.YProportional | AbsoluteLayoutFlags.WidthProportional);
AbsoluteLayout.SetLayoutBounds(footer, new Rectangle(0, 1, 1, AbsoluteLayout.AutoSize));
absoluteLayout.Children.Add(footer);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.