Migrate from Xamarin.Forms SfPopupLayout to .NET MAUI SfPopup

16 Jul 20263 minutes to read

To make migration easier from Xamarin.Forms SfPopupLayout to .NET MAUI SfPopup, we kept most of the APIs from Xamarin SfPopupLayout in .NET MAUI SfPopup. However, to maintain the consistency of API naming in .NET MAUI SfPopup, we renamed some of the APIs. The APIs that have been changed in .NET MAUI SfPopup from Xamarin SfPopupLayout are detailed as follows.

Namespaces

Xamarin SfPopupLayout	.NET MAUI SfPopup
Syncfusion.XForms.SfPopupLayout	Syncfusion.Maui.Popup

Initialize Control

To initialize the control, import the popup namespace and initialize SfPopup as shown in the following code sample.

Xamarin SfPopupLayout .NET MAUI SfPopup

Xamarin SfPopupLayout	.NET MAUI SfPopup
XAML C# `<ContentPage xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"> <sfPopup:SfPopupLayout x:Name="popupLayout"> <sfPopup:SfPopupLayout.Content> <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked"/> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> </ContentPage>` `public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private void ClickToShowPopup_Clicked(object sender, EventArgs e) { popupLayout.Show(); } }`	XAML C# `<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"> <ContentPage.Content> <StackLayout> <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="Fill" Clicked="ClickToShowPopup_Clicked"/> <syncfusion:SfPopup x:Name="popup"/> </StackLayout> </ContentPage.Content> </ContentPage>` `using Syncfusion.Maui.Popup; public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private void ClickToShowPopup_Clicked(object sender, EventArgs e) { popup.Show(); } }`

XAML
C#
<ContentPage xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout">
    <sfPopup:SfPopupLayout.Content>
        <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" 
        VerticalOptions="Start" HorizontalOptions="FillAndExpand"
        Clicked="ClickToShowPopup_Clicked"/>
    </sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popupLayout.Show();      
    }
}

XAML
C#
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <ContentPage.Content>
        <StackLayout>
            <Button x:Name="clickToShowPopup" Text="ClickToShowPopup"
                VerticalOptions="Start" HorizontalOptions="Fill"
                Clicked="ClickToShowPopup_Clicked"/>
            <syncfusion:SfPopup x:Name="popup"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Classes

Xamarin SfPopupLayout	.NET MAUI SfPopup	Description
SfPopupLayout	SfPopup	Displays an alert message with customizable buttons or loads a desired view within a popup window.
PopupView	Nil	Not supported

Properties

NOTE

All the properties from the Xamarin.Forms PopupView class are moved to the .NET MAUI SfPopup class itself.

Xamarin SfPopupLayout	.NET MAUI SfPopup	Description
SfPopupLayout.Content	Nil	Not supported
SfPopupLayout.PopupView	Nil	Not supported
PopupStyle.HeaderBackgroundColor	PopupStyle.HeaderBackground	Gets or sets the background color to be applied for the header.
PopupStyle.FooterBackgroundColor	PopupStyle.FooterBackground	Gets or sets the background color of the footer.
PopupStyle.AcceptButtonBackgroundColor	PopupStyle.AcceptButtonBackground	Gets or sets the background color of accept button in the footer.
PopupStyle.DeclineButtonBackgroundColor	PopupStyle.DeclineButtonBackground	Gets or sets the background color of decline button in the footer.
PopupStyle.BorderColor	PopupStyle.Stroke	Gets or sets the border color for the PopupView.
PopupStyle.BorderThickness	PopupStyle.StrokeThickness	Gets or sets the border thickness for the PopupView.
PopupStyle.OverlayOpacity	PopupStyle.OverlayColor	You can achieve this by setting the value using a color with alpha, as shown below. MainPage.xaml `<syncfusion:SfPopup.PopupStyle> <syncfusion:PopupStyle OverlayColor="#80000000"/> </syncfusion:SfPopup.PopupStyle>`
SfPopupLayoutResources.Title	SfPopupResource.Title	Resource key for the popup title text.
SfPopupLayoutResources.Popup_message	SfPopupResource.Message	Resource key for the popup message text.
SfPopupLayoutResources.ACCEPT	SfPopupResource.AcceptButtonText	Resource key for the accept button text.
SfPopupLayoutResources.DECLINE	SfPopupResource.DeclineButtonText	Resource key for the decline button text.

Enums

Xamarin SfPopupLayout	.NET MAUI SfPopup	Description
AutoSizeMode	PopupAutoSizeMode	Defines constants that specify how the popup is sized.
AppearanceMode	PopupButtonAppearanceMode	Built-in layout styles of the PopupView.
BlurIntensity	PopupBlurIntensity	Defines constants that specify the intensity of the blur effect applied to the overlay.
OverlayMode	PopupOverlayMode	Defines constants that specify whether the overlay should be transparent or blurred.
RelativePosition	PopupRelativePosition	Positions the popup view relative to the given view.

Upcoming Features

Popup position - ShowAtTouchPoint(): A new method to display the popup at the point where the user touched the screen.

Search docs

Ask Syncfusion AI Assistant