web-dev-qa-db-fra.com

Comment créer un formulaire dans une fenêtre contextuelle à l'aide de xamarin.forms?

J'utilise Xamarin.forms et j'ai besoin d'un formulaire de connexion dans une fenêtre contextuelle, comme dans l'image suivante:

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

À l’heure actuelle, j’utilise PushModalAsync. Cependant, la nouvelle page avec le formulaire couvre tout l’écran au lieu d’afficher une fenêtre contextuelle comme je le souhaite.

Est-il possible de faire cela en utilisant xamarin.forms? Sinon, y a-t-il déjà une alternative multi-plateforme (Android, iOS et UWP)? 

c#xamarinpopupmodal-dialogxamarin.forms
10
Mr. Phil

D'après mon expérience, PopupLayout de XLabs ne fonctionne pas correctement parfois . Mais il existe une très belle bibliothèque qui permet de créer des popups complexes: Rg.Plugins.Popup . Le seul problème: l'implémentation UWP est manquante (mais c'est va être publié ). 

14
Mikalai Daronin

XLabs a un PopupLayout que vous pouvez utiliser pour faire cela.

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

J'utilise AbsoluteLayout pour simuler un 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. Tout d’abord, placez le contenu de l’arrière-plan, c’est-à-dire le contenu principal, dans un AbsoluteLayout
  2. Deuxièmement, ajoutez un ContentView (popupOverlay) qui contiendra le contenu de votre formulaire en tant qu'enfant. Cette vue extérieure doit couvrir l’ensemble de l’écran avec une couleur d’arrière-plan grisâtre semi-transparente (# C0 808080).
  3. Centrez la disposition des éléments contextuels (popupContent) à l'intérieur de la superposition.
  4. J'utilise aussi généralement un bouton de fermeture dans le popupContent pour le cacher.
  5. Affichez ou masquez la popup en définissant la propriété IsVisible de popupOverlay sur true ou sur false.
0
Shiblu

Une solution courante que j'ai utilisée consiste à créer un StackLayout avec tout le formulaire à l'intérieur et à l'insérer comme un enfant de la page que vous utilisez, par exemple:

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;

}

Et cela fonctionne pour toutes les plates-formes, le seul inconvénient est que vous ne disposerez pas d'une disposition transparente, mais pour cela, vous pouvez utiliser:

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

0
Mario Galván