CODEWITHSUNDEEP
c#xamarinpopupmodal-dialogxamarin.forms
Mr. Phil
Mr. Phil

Reputation: 1129

How to create a form in a pop-up using xamarin.forms?

I'm using Xamarin.forms and I need to have a login form in a popup view like in the following image:

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

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

Answers (4)

Mario Galván
Mario Galván

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

Shiblu
Shiblu

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>
  1. First, put the background contents i.e. main contents inside of an AbsoluteLayout
  2. 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).
  3. Center the popup element layout (popupContent) inside of the overlay.
  4. I also usually use a close button in the popupContent to hide it.
  5. Show or Hide the popup by setting the IsVisible property of popupOverlay to true or false respectively.

Upvotes: 4

Jason
Jason

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

Mikalai Daronin
Mikalai Daronin

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

Related Questions