2016-05-01 174 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