XAML 模态页面上的AbsoluteLayout控件在.NET MAUI中只能水平放置

blpfk2vs  于 12个月前  发布在  .NET
关注(0)|答案(1)|浏览(95)

有没有办法将AbsoluteLayout控件放置在屏幕的中心,或者至少在页面的中心作为一个覆盖,在一个模态页面上?这是否可能以任何方式或为什么这不像预期的那样工作?使用MAUI社区工具包,我可以创建一个弹出窗口作为一个覆盖,但这显然有很多限制!
这是我的示例页面:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.ModalPage"
             Shell.PresentationMode="ModalAnimated"
             BackgroundColor="#55000000">
    <StackLayout VerticalOptions="End">
        <Frame Style="{StaticResource PopupFrameModal}"
               StyleClass="PopupFrame"
               BackgroundColor="White"
               BorderColor="White"
               HeightRequest="256"
               Margin="0,0,0,-24" CornerRadius="24">
            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <StackLayout HorizontalOptions="Center">
                    <BoxView HeightRequest="10" WidthRequest="100" CornerRadius="5"/>
                    <BoxView HeightRequest="1" Margin="0,18,0,24"/>
                    <VerticalStackLayout>
                        <Label Text="This is a modal page" HorizontalOptions="Center"/>
                    </VerticalStackLayout>
                </StackLayout>
                <AbsoluteLayout>
                    <ActivityIndicator AbsoluteLayout.LayoutFlags="PositionProportional"
                                       AbsoluteLayout.LayoutBounds="0.5,0.5"
                                       Margin="0,16,0,0"
                                       IsVisible="True"
                                       IsRunning="True"/>
                </AbsoluteLayout>
            </StackLayout>
        </Frame>
        <!-- Could also be placed here, but 
             the indicator will show up below 
             the modal page instead... -->
    </StackLayout>
</ContentPage>

字符串
在这个例子中,我使用了一个简单的<ActivityIndicator><AbsoluteLayout>控件。它可以是任何更复杂的东西。指示器只在水平方向居中。在垂直方向上,它的行为就像一个相对定位的控件,在设置诸如边距之类的属性时也是如此。注意我为<ContentPage>使用的Shell.PresentationMode="ModalAnimated" prop 。

ix0qys7i

ix0qys7i1#

如果您的 AbsoluteLayoutStackLayout子项,则它不一定位于 ContentPage 的中心,因为您告诉它要垂直堆叠在其他视觉元素之下。
如果你想让 AbsoluteLayout 覆盖其他所有内容,它不应该是 StackLayout 的子元素,而是应该与 StackLayout 在同一层次上,但具有更高的z索引。
例如,您可以通过将 StackLayoutAbsoluteLayout Package 在Grid中来实现这一点,Grid通常用于z方向的堆叠:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.ModalPage"
             Shell.PresentationMode="ModalAnimated"
             BackgroundColor="#55000000">
    <Grid>
        <StackLayout VerticalOptions="End">
            <Frame Style="{StaticResource PopupFrameModal}"
                   StyleClass="PopupFrame"
                   BackgroundColor="White"
                   BorderColor="White"
                   HeightRequest="256"
                   Margin="0,0,0,-24" CornerRadius="24">
                <StackLayout HorizontalOptions="Center">
                    <BoxView HeightRequest="10" WidthRequest="100" CornerRadius="5"/>
                    <BoxView HeightRequest="1" Margin="0,18,0,24"/>
                    <VerticalStackLayout>
                        <Label Text="This is a modal page" HorizontalOptions="Center"/>
                    </VerticalStackLayout>
                </StackLayout>                
            </Frame>
        </StackLayout>
        <AbsoluteLayout VerticalOptions="Fill"
                        HorizontalOptions="Fill">
            <ActivityIndicator AbsoluteLayout.LayoutFlags="PositionProportional"
                               AbsoluteLayout.LayoutBounds="0.5,0.5"
                               Margin="0,16,0,0"
                               IsVisible="True"
                               IsRunning="True"/>
        </AbsoluteLayout>
    </Grid>    
</ContentPage>

字符串
然而,这甚至不应该是必要的。为了在页面中心显示 ActivityIndicator,您可以简单地将 ActivityIndicator 直接放置在 Grid 的中心,在 StackLayout 的顶部(z方向),如下所示:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.ModalPage"
             Shell.PresentationMode="ModalAnimated"
             BackgroundColor="#55000000">
    <Grid>
        <StackLayout VerticalOptions="End">
            <Frame Style="{StaticResource PopupFrameModal}"
                   StyleClass="PopupFrame"
                   BackgroundColor="White"
                   BorderColor="White"
                   HeightRequest="256"
                   Margin="0,0,0,-24" CornerRadius="24">
                <StackLayout HorizontalOptions="Center">
                    <BoxView HeightRequest="10" WidthRequest="100" CornerRadius="5"/>
                    <BoxView HeightRequest="1" Margin="0,18,0,24"/>
                    <VerticalStackLayout>
                        <Label Text="This is a modal page" HorizontalOptions="Center"/>
                    </VerticalStackLayout>
                </StackLayout>                
            </Frame>
        <ActivityIndicator 
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Margin="0,16,0,0"
            IsVisible="True"
            IsRunning="True"/>
    </Grid>    
</ContentPage>

相关问题