如何在 AbsoluteLayout 中正确居中？

Question

我有元素 a 和元素 b，我希望 b 与 a 重叠。 虽然我使用 AbsoluteLayout 完成了此操作，但似乎元素 b 不再正确居中。

这是它的外观截图：

上图橙色以AbsoluteLayout居中为参考，背景中的label为元素a，红框为元素b。

<StackLayout Orientation="Vertical">
        <StackLayout  HeightRequest="150"  Orientation="Horizontal" HorizontalOptions="Center">
            <Image x:Name="logo" Aspect="AspectFit"  HorizontalOptions="FillAndExpand"  Source="percentageLOGOsmall2.png"></Image>
        </StackLayout>
        <AbsoluteLayout HorizontalOptions="Center">

            <Label x:Name="l_trinkeinladung" Text="Lorem ipsum test text" WidthRequest="300" FontSize="Title"
             AbsoluteLayout.LayoutBounds="0,0.5,-1,-1"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             HorizontalOptions="Center"
             TextColor="White"
             HorizontalTextAlignment="Center"
                   />
             <ListView HorizontalOptions="Center" ItemsSource="{Binding players}" HeightRequest="270" WidthRequest="200" x:Name="listview1" RowHeight="50" BackgroundColor="Red">
                <ListView.ItemTemplate >
                    <DataTemplate>
                        <ViewCell >
                       /*Stack for properites*/
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </AbsoluteLayout>
    </StackLayout>

为什么红色列表视图不居中？

Answer 1

根据您的代码，您在AbsoluteLayout中添加ListView，如果您想在AbsoluteLayout中将ListView设置为中心，您可以使用AbsoluteLayout.LayoutBounds和AbsoluteLayout.LayoutFlags设置ListView position。

请看下面的代码：

<StackLayout Orientation="Vertical">
        <StackLayout
            HeightRequest="150"
            HorizontalOptions="Center"
            Orientation="Horizontal">
            <Image
                x:Name="logo"
                Aspect="AspectFit"
                HorizontalOptions="FillAndExpand"
                Source="a11.jpg" />
        </StackLayout>
        <AbsoluteLayout HorizontalOptions="Center">

            <Label
                x:Name="l_trinkeinladung"
                AbsoluteLayout.LayoutBounds="0,0.5,-1,-1"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                FontSize="Title"
                Text="Lorem ipsum test text, this is test aaaaaaaaaaaaa"
                TextColor="Black"
                WidthRequest="300" />
            <ListView
                x:Name="listview1"
                AbsoluteLayout.LayoutBounds=".5,.5,200,270"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                BackgroundColor="Red"
                HorizontalOptions="Center"
                ItemsSource="{Binding players}"
                RowHeight="50">

                <!--<ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            /*Stack for properites*/
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>-->

            </ListView>
        </AbsoluteLayout>
    </StackLayout>

截图如下：

AbsoluteLayoutFlags指定如何解释值，并具有以下预定义选项：

无- 将所有值解释为绝对值。 如果没有指定布局标志，这是默认值。

全部- 将所有值解释为成比例。

WidthProportional – 将 Width 值解释为比例，而将所有其他值解释为绝对值。

HeightProportional – 仅将高度值解释为与所有其他绝对值成比例。

XProportional – 将 X 值解释为成比例，而将所有其他值视为绝对值。

YProportional – 将 Y 值解释为成比例，而将所有其他值视为绝对值。

PositionProportional – 将 X 和 Y 值解释为成比例，而大小值则解释为绝对值。

SizeProportional – 将 Width 和 Height 值解释为成比例，而 position 值是绝对值。

关于使用 Xamarin.Forms AbsoluteLayout，请查看详细信息：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout