it-swarm.com.de

Wie erstelle ich ein Formular mit xamarin.forms in einem Popup?

Ich verwende Xamarin.forms und brauche ein Anmeldeformular in einer Popup-Ansicht wie im folgenden Bild:

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

Im Moment verwende ich PushModalAsync, dies macht jedoch die neue Seite mit dem Formular über den gesamten Bildschirm, anstatt nur eine Popup-Ansicht anzuzeigen, wie ich möchte.

Gibt es eine Möglichkeit, dies mit xamarin.forms zu tun? Wenn nicht, gibt es bereits eine plattformübergreifende Alternative (Android, iOS und UWP)? 

10
Mr. Phil

Meine Erfahrung sagt, dass XLabs 'PopupLayout manchmal nicht richtig funktioniert . Aber es gibt eine wirklich schöne Bibliothek, die es erlaubt, komplexe Popups zu erstellen: Rg.Plugins.Popup . Das einzige Problem: Die UWP-Implementierung fehlt (aber es wird wird veröffentlicht ). 

14
Mikalai Daronin

XLabs hat ein PopupLayout, mit dem Sie dies tun können.

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);
4
Jason

Ich verwende AbsoluteLayout, um Popup zu simulieren.

<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. Legen Sie zunächst den Hintergrundinhalt, d. H. Den Hauptinhalt in ein AbsoluteLayout
  2. Fügen Sie eine ContentView (popupOverlay) hinzu, die Ihren Formularinhalt als untergeordnetes Element enthält. Diese Außenansicht sollte sich über den gesamten Bildschirm erstrecken und eine halbtransparente, graue Hintergrundfarbe haben (# C0 808080).
  3. Zentrieren Sie das Popup-Element-Layout (popupContent) innerhalb der Überlagerung.
  4. Normalerweise verwende ich auch einen close-Button im popupContent, um ihn auszublenden.
  5. Das Popup anzeigen oder ausblenden, indem Sie die IsVisible-Eigenschaft von popupOverlay auf true bzw. false setzen.
0
Shiblu

Eine gängige Lösung, die ich verwendet habe, ist die Lösung dieses Problems: Erstellen Sie ein StackLayout mit dem gesamten Formular und fügen Sie es als untergeordnete Elemente der aktuell verwendeten Seite ein. Beispiel:

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;

}

Und das funktioniert auf allen Plattformen. Der einzige Nachteil ist, dass Sie kein transparentes Layout haben. Dafür können Sie jedoch Folgendes verwenden:

https://github.com/gaborv/xam-forms-transparent-modal

0
Mario Galván