2016-05-01 126 views
9

我使用Xamarin.forms,我需要有一个登录形式,像下面的图片在弹出的看法:如何使用xamarin.forms在弹出窗口中创建窗体?

https://github.com/michaeled/FormsPopup/blob/master/pictures/androidPopup.gif?raw=true

现在,我使用PushModalAsync,然而,这使得新页面与表单覆盖整个屏幕,而不是只显示一个弹出视图,因为我想。

有没有办法使用xamarin.forms做到这一点?如果没有,是否有任何已实施的跨平台(Android,iOS和UWP)替代方案?

回答

11

我的经验说,XLabs的PopupLayout doesn't work properly sometimes。但有一个非常好的库可以创建复杂的弹出窗口:Rg.Plugins.Popup。唯一的问题是:UWP实施丢失(但它是going to be released)。

+0

感谢您的帮助,但在这种情况下需要uwp实施。 –

+1

[Rg.Plugins.Popup](https://github.com/rotorgames/Rg.Plugins.Popup) 预售(1.0.0-pre1)已经支持WinPhone和UWP。 如果您接受参与测试版测试,我会很高兴。 – user1658602

4

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

谢谢您的回答。不幸的是,我得到一个错误NullReferenceException(https://github.com/XLabs/Xamarin-Forms-Labs/issues/1107#issuecomment-197701086)。你知道如何解决它吗? –

0

我使用了一个共同的解决方案是用来解决这个是创建一个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); 

} 

So in order to show the popoUP you need to play with the IsVisible property, for example: 

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