How to create a form in a pop-up using xamarin.forms?
A common solution I have used is to used to solve this is to create a StackLayout
with all the form inside and insert it a children of the Page you are currently using, for example:
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;
}
And this works for all platforms, the only disadvantage is that you will not have the transparent layout, but for that you can use:
https://github.com/gaborv/xam-forms-transparent-modal
My experience says that XLabs' PopupLayout doesn't work properly sometimes. But there is a really nice library which allow to create complex popups: Rg.Plugins.Popup. The only problem: UWP implementation is missing (but it's going to be released).
XLabs has a PopupLayout that you can use to do this.
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);
I use AbsoluteLayout to simulate 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>
- First, put the background contents i.e. main contents inside of an AbsoluteLayout
- Second, Add a ContentView (popupOverlay) which will hold your form content as a child. This outer view should span across the entire screen with a semitransparent grayish background color (#C0808080).
- Center the popup element layout (popupContent) inside of the overlay.
- I also usually use a close button in the popupContent to hide it.
- Show or Hide the popup by setting the IsVisible property of popupOverlay to true or false respectively.