如何使用 xamarin.forms 在弹出窗口中创建表单？答案

【问题标题】：How to create a form in a pop-up using xamarin.forms?如何使用 xamarin.forms 在弹出窗口中创建表单？
【发布时间】：2016-05-01 01:07:48
【问题描述】：

我正在使用 Xamarin.forms，我需要在弹出视图中有一个登录表单，如下图所示：

现在我正在使用 PushModalAsync，但是这会使带有表单的新页面覆盖整个屏幕，而不是只显示我想要的弹出视图。

有没有办法使用 xamarin.forms 做到这一点？如果没有，是否已经实现了任何跨平台（Android、iOS 和 UWP）替代方案？

【问题讨论】：

stackoverflow.com/questions/44709571/…

标签： c# xamarin popup modal-dialog xamarin.forms

【解决方案1】：

我的经验表明 XLabs 的 PopupLayout doesn't work properly sometimes。但是有一个非常好的库可以创建复杂的弹出窗口：Rg.Plugins.Popup。唯一的问题：缺少 UWP 实现（但它是 going to be released）。

【讨论】：

感谢您的帮助，但在这种情况下需要 uwp 实现。
Rg.Plugins.Popup Prerelease (1.0.0-pre1) 已经支持 WinPhone 和 UWP。如果您接受参与 beta 测试，我会很高兴。

【解决方案2】：

XLabs 有一个可用于执行此操作的 PopupLayout。

var pop = new XLabs.Forms.Controls.PopupLayout();

// PatientSearch is a ContentView I was to display in the popup
var search = new PatientSearch(data, this);
search.WidthRequest = 600;
search.HeightRequest = 500;
search.BackgroundColor = new Color (1, 1, 1, 0.8);
pop.ShowPopup(search);

【讨论】：

感谢您的回答。不幸的是，我收到错误 NullReferenceException (github.com/XLabs/Xamarin-Forms-Labs/issues/…)。你知道怎么解决吗？

【解决方案3】：

我使用AbsoluteLayout来模拟popup。

<AbsoluteLayout x:Name="rootLayout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <StackLayout x:Name="mainLayout" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <!-- Put your main contents-->
        </StackLayout>
        <ContentView x:Name="popupOverlay"
                     IsVisible="{Binding IsPopupVisible}"
                     BackgroundColor="#C0808080"
                     AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All">
            <StackLayout x:Name="popupContent"
                         VerticalOptions="Center"
                         HorizontalOptions="Center"
                         WidthRequest="200"
                         HeightRequest="200">
                <Entry Placeholder="UserName"></Entry>
                <Entry Placeholder="Password"></Entry>
            </StackLayout>
        </ContentView>
</AbsoluteLayout>

首先，将背景内容（即主要内容）放入 AbsoluteLayout 中
其次，添加一个 ContentView (popupOverlay)，它将您的表单内容保留为子项。此外部视图应以半透明的灰色背景色 (#C0808080) 横跨整个屏幕。
在叠加层内居中弹出元素布局 (popupContent)。
我通常也使用 popupContent 中的关闭按钮来隐藏它。
通过将 popupOverlay 的 IsVisible 属性分别设置为 true 或 false 来显示或隐藏弹出窗口。

【讨论】：

这会让你的 ui 变得沉重。这不是最好的主意。你最好使用 rg 弹出窗口，一旦你在弹出窗口上完成了你的工作，你可以处理它，但如果你隐藏它，它仍然存在于 ui 树中。
你是对的。但它是弹出模拟的另一种方式。
我尝试了类似的方法，但遇到了不同的问题：方向变化、内容大小……这对我来说只是一个最小的演示，但是你有类似弹出窗口的东西XF.
你应该使用网格而不是堆栈布局，这样你应该有一个更一致的方向变化布局。
我已经努力了一个小时！非常感谢！

【解决方案4】：

我用来解决这个问题的一个常见解决方案是创建一个包含所有表单的StackLayout，并将其插入到您当前正在使用的页面的子页面中，例如：

PopupPage popUp; //This will be the layout of the form

Page : ContentPage {

    var gird = new Gird();

    popUp = PopupPage();
    popUp.IsVisible = false;

    var mainContainer = new StackLayout();

    mainContainer.Children.Add(All you UI stuff..);

    var btn = new Button();
    btn.Clicked += OnButtonClicked;

    grid.Children.Add(mainContainer,0,0);
    grid.Children.Add(popUp,0,0);

}

因此，为了显示 popoUP，您需要使用 IsVisible 属性，例如：

void OnButtonClicked(){

    //You can center the popup using Vertical options or whatever you need
    //and to resize the pop up you can do different calculations like
    //popUp.Width = ScreenWidth / 2 and popUp.Height = ScreenWidth / 2
    popUp.IsVisile = true;

}

这适用于所有平台，唯一的缺点是你不会有透明的布局，但你可以使用：

https://github.com/gaborv/xam-forms-transparent-modal

【讨论】：