How do I show a RadPopup programmatically in .NET MAUI

1 Answer 277 Views
Popup
Arthur
Top achievements
Rank 1
Arthur asked on 30 Aug 2023, 10:55 PM
I'm writing an application that needs to show a popup with a message and different number of buttons depending on the result of an API call. To achieve this with a regular MAUI toolkit popup, I'm using
App.Current.MainPage.ShowPopupAsync
However, this doesn't work with RadPopups. Is there anyway to show a RadPopup programmatically and return the result of a button click?

1 Answer, 1 is accepted

Sort by
1
Accepted
Maria
Telerik team
answered on 31 Aug 2023, 08:58 PM

Hello Arthur,

Our Popup control has an IsOpen property. It is a Bindable property so you can achieve the described scenario using this property and call the popup from the ViewModel class.  

Check the code snippet below for example:

 <Grid>
        <Button x:Name="button"
                HorizontalOptions="Center" 
                VerticalOptions="Start" 
                Command="{Binding OpenPopup}"
                Text="Show popup">
            <telerik:RadPopup.Popup>
                <telerik:RadPopup x:Name="popup"
                                  IsModal="True" IsOpen="{Binding IsPopupOpen}"
                                  OutsideBackgroundColor="#6F000000">
                    <telerik:RadBorder CornerRadius="8" 
                             BackgroundColor="Wheat">
                        <Grid Padding="10"
                    WidthRequest="200"
                    HeightRequest="150">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label Text="Thank you for choosing Telerik UI for .NET MAUI." 
                         LineBreakMode="WordWrap" />
                            <telerik:RadButton Grid.Row="1"
                                               Padding="2"
                                               HorizontalOptions="End"
                                               Text="Close"
                                               Command="{Binding ClosePopup}"/>
                        </Grid>
                    </telerik:RadBorder>
                </telerik:RadPopup>
            </telerik:RadPopup.Popup>
        </Button>
    </Grid>

And the ViewModel class and MainPage code behind:

public partial class MainPage : ContentPage
{
	public MainPage()
	{
            InitializeComponent();
            this.BindingContext = new PopupViewModel();
	}
}

public class PopupViewModel : NotifyPropertyChangedBase
{
	private bool isPopupOpen = false;

	public PopupViewModel() 
	{
		this.OpenPopup = new Command(this.OnOpenPopup);
		this.ClosePopup = new Command(this.OnClosePopup);
	}
   
    public ICommand OpenPopup { private set; get; }

    public ICommand ClosePopup { private set; get; }
    public bool IsPopupOpen
	{ 
		get => this.isPopupOpen;
		set 
		{
			if (this.isPopupOpen != value)
			{
				this.isPopupOpen = value;
				OnPropertyChanged();
			}
		}		
	}
    private void OnOpenPopup()
    {
        this.IsPopupOpen = true;
    }
    private void OnClosePopup()
    {
        this.IsPopupOpen = false;
    }
}

Another approach

If you want to be able to manage the popup anywhere in the app (instead of only from one page's single ViewModel) you can register a service like seen in this demo: PopupServiceDemo.

I hope the provided information and code will be of help. Let me know if I can assist you further.

Regards,
Maria
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Arthur
Top achievements
Rank 1
commented on 06 Sep 2023, 10:43 PM

This is exactly what I was looking for. Thank you!
Tags
Popup
Asked by
Arthur
Top achievements
Rank 1
Answers by
Maria
Telerik team
Share this question
or