如何使用Xamarin.Forms在弹出窗口中创建表单？

Question

我正在使用Xamarin.forms，需要在弹出视图中创建登录表单，就像以下图片所示：

目前我正在使用PushModalAsync，但这会使包含表单的新页面覆盖整个屏幕，而不是像我想要的那样只显示弹出视图。

有没有办法使用Xamarin.forms实现这一点？如果没有，是否有跨平台（Android、iOS和UWP）的替代方案？

- Mr. Phil

---

https://dev59.com/U6Lia4cB1Zd3GeqPpNXg#51743006 - Markus Michel

Answer 1

根据我的经验，XLabs的PopupLayout有时会存在问题。但是有一个非常好的库可以创建复杂的弹出窗口：Rg.Plugins.Popup。唯一的问题是：UWP实现尚未完成（但即将发布）。

- Mikalai Daronin

---

感谢您的帮助，但在这种情况下需要进行UWP实现。 - Mr. Phil

Rg.Plugins.Popup 预发行版（1.0.0-pre1）已经支持WinPhone和UWP。如果您愿意参与测试，我会很高兴。 - user1658602

Answer 2

XLabs有一个弹出布局，您可以使用它来实现此功能。

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);

- Jason

---

谢谢您的回答。不幸的是，我遇到了一个 NullReferenceException 错误（https://github.com/XLabs/Xamarin-Forms-Labs/issues/1107#issuecomment-197701086）。您知道如何解决吗？ - Mr. Phil

Answer 3

我使用 AbsoluteLayout 来模拟弹出窗口。

<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>

1. 首先，将背景内容即主要内容放置在AbsoluteLayout中。
2. 其次，添加一个ContentView（popupOverlay），它将作为子元素来容纳表单内容。这个外部视图应该跨越整个屏幕，并具有半透明的灰色背景色（#C0808080）。
3. 将弹出窗口布局（popupContent）居中放置在覆盖层上。
4. 我通常还会在popupContent中使用一个关闭按钮来隐藏它。
5. 通过将popupOverlay的IsVisible属性分别设置为true或false来显示或隐藏弹出窗口。

- Shiblu

---

这会使您的用户界面变得沉重。这不是最好的想法。您最好使用RG弹出窗口，一旦您完成了对弹出窗口的工作，就可以将其处理掉，但如果您隐藏它，它仍然存在于UI树中。 - Emil

你是对的。但这是一种弹出模拟的替代方式。 - Shiblu

我尝试了类似的方法，但我遇到了不同的问题：方向改变，内容大小等等。这对我来说只是一个最小化的演示，但是在XF中你确实有类似弹出窗口的东西。 - testing

你应该使用网格布局而不是堆栈布局，这样在屏幕方向变化时可以获得更一致的布局。 - Shiblu

我已经尝试了一个小时才实现这个！非常感谢！ - Adam Jachocki

Answer 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);

}

为了显示弹出窗口，您需要操作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。

- Mario Galván