如何使用具有绝对布局的框架在网格顶部创建弹出窗口？

Posted 2023-04-12

【中文标题】如何使用具有绝对布局的框架在网格顶部创建弹出窗口？

【英文标题】：how to use a frame with absolute layout to create a pop up window on top of a grid?

【发布时间】：2021-09-13 23:49:53

【问题描述】：

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

【问题讨论】：

您可以尝试使用 InputTransparent 属性 - 否则很难提供具体帮助，因为您尚未发布任何代码或 xaml。您还可以查看 Xamarin Community Toolkit 中的弹出控件

您可以在 Grid 中弹出之前添加一个全尺寸的 BoxView 以避免点击和BackgroundColor = "transparent"

刚刚试了一下，不幸的是，即使在弹出按钮之前将 boxview 放在网格顶部，按钮仍然处于活动状态。由于boxview，我真的看不到它们，但我仍然可以单击它们的位置并输入它们的数据。这种奇怪的行为。它开始看起来唯一的解决方法是在弹出窗口出现时手动禁用它们。

【参考方案1】：

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

我做了一个简单的演示，它可以正常工作。当我单击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;
    

结果是：

【讨论】：

我很欣赏评论，这段代码很棒，但它并没有真正回答我的问题。您的弹出窗口仍然存在与我的弹出窗口相同的问题，即后面网格上的按钮仍然处于活动状态，如果您点击它们，您可以在它们上输入数据。这就是我试图找到一种解决方法，而不是在弹出窗口出现时手动禁用按钮。有什么想法吗？谢谢

但是你不能在这个中点击“显示弹出窗口”，对吧？ @gio13

@gio13，由于弹窗区域（ContentView）是全屏的，所以在弹窗显示后我们无法点击后面的按钮。