Reputation: 1129
I'm using Xamarin.forms and I need to have a login form in a popup view like in the following image:
Right now I'm using PushModalAsync, however this makes the new page with the form cover the whole screen, instead of just showing a popup view as I want.
Is there any way to do this using xamarin.forms? If not, is there any cross-platform (Android, iOS and UWP) alternative already implemented?
Upvotes: 17
Views: 29795
Reputation: 4032
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
Upvotes: 2
Reputation: 477
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>
Upvotes: 4
Reputation: 89204
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);
Upvotes: 4
Reputation: 8716
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).
Upvotes: 17