CODEWITHSUNDEEP
user-interfacexamarinxamarin.forms
Harshita Ghosh
Harshita Ghosh

Reputation: 93

How to create a popup with entry in Xamarin forms?

I have a label. when user taps on this label it will show a display popup with an entry so that user can type message. Here is my image-

How can i create this?

Upvotes: 2

Views: 2212

Answers (2)

Hichame Yessou
Hichame Yessou

Reputation: 2718

That's a good example from here implementing a custom input alert:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace acrossWords.Pages
{
    public class ConfirmationPage : ContentPage
    {
        public bool result;
        Image ConfirmButton;
        Image CancelButton;
        Label QuestionLabel;
        public TaskCompletionSource<string> tcs;

    public ConfirmationPage()
    {
        BackgroundImage = "ConfirmationPage.png";
        QuestionLabel = new Label
        {
            FontFamily = "BookAntiqua",
            //Margin = Margin = new Thickness(0, 5, 0, 0),
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) * 1.2,
            Text = "",
            TextColor = Xamarin.Forms.Color.White,
            //HorizontalOptions = LayoutOptions.StartAndExpand,
            //VerticalTextAlignment = Xamarin.Forms.TextAlignment.Center
        };
        ConfirmButton = new Image { Source = "ConfirmButton.png"};
        CancelButton = new Image { Source = "CancelButton.png"};

        AbsoluteLayout ConfirmLayout = new AbsoluteLayout { };
        Content = ConfirmLayout;
        AbsoluteLayout.SetLayoutFlags(ConfirmLayout, Xamarin.Forms.AbsoluteLayoutFlags.All);
        AbsoluteLayout.SetLayoutBounds(ConfirmLayout, new Xamarin.Forms.Rectangle(0, 0, 1, 1));
        ConfirmLayout.Children.Add(QuestionLabel, new Rectangle(0.3, 0.3, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize), AbsoluteLayoutFlags.PositionProportional);
        ConfirmLayout.Children.Add(ConfirmButton, new Rectangle(0.2, 0.7, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize), AbsoluteLayoutFlags.PositionProportional);
        ConfirmLayout.Children.Add(CancelButton, new Rectangle(0.8, 0.7, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize), AbsoluteLayoutFlags.PositionProportional);

        ConfirmButton.GestureRecognizers.Add(new TapGestureRecognizer
        {
            NumberOfTapsRequired = 1,
            Command = new Command(OnConfirm)
        });
        CancelButton.GestureRecognizers.Add(new TapGestureRecognizer
        {
            NumberOfTapsRequired = 1,
            Command = new Command(OnCancel)
        });
    }
    public void clearTCS()
    {
        tcs = new TaskCompletionSource<string>();
    }
    public  async Task ShowConfirmation(string question)
    {
        QuestionLabel.Text = question;
        await App.PushPage(this);
    }
    void OnConfirm()
    {
        tcs.SetResult("true");
        App.PopPage();
    }
    void OnCancel()
    {
        tcs.SetResult("false");
        App.PopPage();
    }

}

Upvotes: 0

VahidShir
VahidShir

Reputation: 2126

Option one (the easy way): You can use some of plugins out there such as Rg.Plugins.Popup

Option Two (the hard way): make it your own. This was my own choice as the above popular plugin didn't allow me to use any custom page such as FreshMvvm pages. In this option we should create a UI for the whole popup, making its IsVisible dynamic. Also Making the other components which could be the whole page's IsEnabled as false upon showing this popup. We could optionally change the whole page's Opacity dynamically as well. The good advantage of this way is everything is under our control.

Upvotes: 1

Related Questions