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

blpfk2vs 于 12个月前发布在 .NET

关注(0)|答案(1)|浏览(94)

有没有办法将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 。

xaml

来源：https://stackoverflow.com/questions/77598483/absolutelayout-controls-on-a-modal-page-only-position-horizontally-in-net-maui

1条答案

按热度按时间

ix0qys7i1#

如果您的 AbsoluteLayout 是 StackLayout 的子项，则它不一定位于 ContentPage 的中心，因为您告诉它要垂直堆叠在其他视觉元素之下。
如果你想让 AbsoluteLayout 覆盖其他所有内容，它不应该是 StackLayout 的子元素，而是应该与 StackLayout 在同一层次上，但具有更高的z索引。
例如，您可以通过将 StackLayout 和 AbsoluteLayout 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>

型

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答