首页 > 解决方案 > 如何使用绝对布局的框架在网格顶部创建弹出窗口?

问题描述

我正在构建一个包含许多按钮和条目的网格的应用程序。当您单击网格上的一个按钮时,我希望有一个弹出窗口,以便用户可以在其中执行一些操作。通过使用绝对布局以及框架以及框架内的其他视图,我几乎可以做到这一点。我唯一的问题是,当单击弹出按钮后出现框架时,网格的其他组件在框架后面仍然处于活动状态并且可以单击。
例如,我有一个条目来输入注释。当弹出窗口出现时,它会覆盖 Notes 条目,但是如果您单击正确的位置,您仍然可以获得 Notes 条目并在其中输入数据。这很奇怪。
我知道当用户单击弹出按钮时我可以禁用网格中的所有其他按钮和条目,但我想知道是否有一种更简单/更好的方法可以做到这一点,而不是手动禁用/每次弹出窗口出现时启用按钮。谢谢

标签: c#visual-studioxamarinxamarin.formsxamarin.android

解决方案


是的,您可以在网格顶部制作一个全尺寸的弹出窗口。

我做了一个简单的演示,它工作正常。当我单击Show Popup按钮时,会弹出一个弹出窗口。我们可以使弹出区域填满屏幕并设置BackgroundColor为透明色(#C0808080)。

您可以参考以下代码:

<ContentPage.Content>
    <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                <Label Text="Test " HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"></Label>
                <Image x:Name="imgFruit" HeightRequest="200" WidthRequest="200" Source="cherry.png"></Image>
                <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Show Popup"></Button>
            </StackLayout>
        </StackLayout>

        <!--Popup Area-->
        <ContentView x:Name="popupLoginView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
                    <Entry Margin="20,20,20,10" Placeholder="Enter Username"></Entry>
                    <Entry Margin="20,0,20,0" Placeholder="Enter Password"></Entry>
                    <Button Margin="20,0,20,0" Text="Login"></Button>
                </StackLayout>
            </StackLayout>
        </ContentView>
    </AbsoluteLayout>
</ContentPage.Content>

功能btnPopupButton_Clicked

    private void btnPopupButton_Clicked(object sender, EventArgs e)
    {
        popupLoginView.IsVisible = true;
    }

结果是:

在此处输入图像描述


推荐阅读