Show Pop Up for entering Data

Question

Hi Friends. I want to show a Modal Pop Up to get data from the user. Is there a base class for a Pop Up View and Can I use a RelayCommand to display the Pop up? Thanks !!!!

Answer 1

Hello,

You can achieve it by Popup - .NET MAUI Community Toolkit - .NET Community Toolkit | Microsoft Learn.

Firstly, please refer to this document to set it up

Then create a contentpage like following code. I add Entry to get data from the user.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiPopWindow.SimplePopup"
             >
    <VerticalStackLayout>
        <Label
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center"
            HorizontalOptions="Center" />
        <Entry x:Name="myEntry"></Entry>
        <Button Text="OK"
                Clicked="OnOKButtonClicked" />
    </VerticalStackLayout>
</toolkit:Popup>

Here is popup's background code. When you click the Ok button. this popup will be closed and transfer data to previous page.

using CommunityToolkit.Maui.Views;
namespace MauiPopWindow;

public partial class SimplePopup : Popup
{
    public SimplePopup()
    {
        InitializeComponent();
    }
    void OnOKButtonClicked(object? sender, EventArgs e) => Close(myEntry.Text);
}

If I popup up in the mainPage's button click event, then I can get the value from the popup window by var result = await this.ShowPopupAsync(popup);

private async void OnCounterClicked(object sender, EventArgs e)
    {
        var popup = new SimplePopup();

       var result = await this.ShowPopupAsync(popup);
    }

By the way, if you have only one entry to get data, you can use string result = await DisplayPromptAsync("Question 1", "What's your name?"); directly by display a prompt

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.