Xamarin 将 ImageButton 对齐到底部答案

【问题标题】：Xamarin Forms Allign ImageButton to bottomXamarin 将 ImageButton 对齐到底部
【发布时间】：2019-12-05 21:05:25
【问题描述】：

我有问题。我正在尝试将我的 ImageButton 对齐到页面底部，因此我创建了以下代码：

<RelativeLayout VerticalOptions="FillAndExpand">

    <StackLayout Orientation="Vertical" x:Name="MainLayout" VerticalOptions="Center">

        <Grid x:Name="GridUpperControl">
            ....
        </Grid>

        <Grid x:Name="GridBottomControl">
            ....
        </Grid>
    </StackLayout>

    <StackLayout VerticalOptions="End" Orientation="Horizontal">
        <ImageButton Source="ActionButton_Continue.png" BackgroundColor="Transparent" 
                     HorizontalOptions="End" Margin="0, 0, 15, 15"
                     WidthRequest="80" HeightRequest="80" />
    </StackLayout>

</RelativeLayout>

但问题出在这里，两个堆栈布局都在顶部对齐.... 我做错了什么？

【问题讨论】：

您在这里使用相对布局作为外部容器。要在相对布局中定位元素，您需要使用约束。见docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…

标签： xaml xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

是的，正如 Max 所说，您可以在 RelativeLayout 中使用约束。我已经写了一些代码：

<RelativeLayout VerticalOptions="FillAndExpand">

        <StackLayout
            x:Name="MainLayout"
            Orientation="Vertical"
            VerticalOptions="Center">

            <Grid x:Name="GridUpperControl">
                <Button Text="btn1" />
            </Grid>

            <Grid x:Name="GridBottomControl">
                <Button Text="btn2" />
            </Grid>
        </StackLayout>

        <StackLayout
            Orientation="Horizontal"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                              Property=Width,
                                                              Factor=0.5,
                                                              Constant=-80}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                              Property=Height,
                                                              Factor=1,
                                                              Constant=-80}"
            VerticalOptions="End">
            <ImageButton
                Margin="0,0,15,15"
                BackgroundColor="Transparent"
                HeightRequest="80"
                HorizontalOptions="End"
                Source="check.png"
                WidthRequest="80" />
        </StackLayout>

    </RelativeLayout>

第二个stacklayout x坐标定义为父级宽度的一半，-80，y坐标定义为父级宽度，-80。

【讨论】：