We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Create full screen and transparent SfPopup

Hi it is possible create full screen and transparent SfPopup? My goal is create busy popup dialog.

I tried this.

                _popupLayout = new SfPopupLayout();
                _popupLayout.PopupView.ShowHeader = false;
                _popupLayout.PopupView.ShowCloseButton = false;
                _popupLayout.PopupView.ShowFooter = false;

                _popupLayout.PopupView.HeaderTitle = string.Empty;

                _popupLayout.PopupView.Opacity = 0;

                _popupLayout.Opacity = 0;

                var templateView = new DataTemplate(() => new BusyDialogView
                    BindingContext = new BusyIndicatorStatusViewModel { IsBusy = true, Title = "Awesome busy message" }

                _popupLayout.PopupView.ContentTemplate = templateView;


        <StackLayout Opacity="0.1">
                IsBusy="{Binding IsBusy}"
                TextColor="{StaticResource BusyIndicatorColor}"
                VerticalOptions="Center" />
                Text="{Binding Title}"
                TextColor="{StaticResource BusyIndicatorColor}" />

But popup is still white background.

5 Replies

VR Vigneshkumar Ramasamy Syncfusion Team November 27, 2018 07:06 AM UTC

Hi Jan,  
Thanks for contacting Syncfusion Support.  
Your requirement “To create a transparent popup” can be achieved by setting SfPopupLayout.PopupView.PopupStyle.BorderColor as Transparent and Transparent background color to the view loaded in the DataTemplate of the SfPopupLayout.PopupView.ContentTemplate.   
Your requirement to create a full screen popup can be achieved by setting SfPopupLayout.PopupView.HorizontalOptions andSfPopupLayout.PopupView.VerticalOptions as “FillAndExpand”.   
Please find the code snippet of the same below.  
<sfPopup:SfPopupLayout x:Name="popupLayout">  
        <sfPopup:PopupView ShowHeader="False" ShowFooter="False"VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >  
                <sfPopup:PopupStyle BorderColor="Transparent"/>  
                    <Label BackgroundColor="Transparent" Text="Popup Content"/>  
            <Button x:Name="isOpenButton" Text="Click to open popup"Clicked="isOpenButton_Clicked"/>  
We have prepared the sample as per your requirement, you can download the same from the below link.  
Vigneshkumar R 

JO Jorge February 7, 2021 02:44 PM UTC

Does the solution is still valid?


It seems the Background set in the Content as the solution said <Label BackgroundColor="Transparent" Text="Popup Content"/> , it does change the background color if you use a solid one as Red, Yellow, Green..., but if it's "Transparent" the background is set to white instead of transparent....


PK Pradeep Kumar Balakrishnan Syncfusion Team February 8, 2021 01:07 PM UTC

Hi Jorge, 
Thank you for the update. 
We have checked your requirement “How to define transparent background color to SfPopup view” define light theme and set the transparent color value to SfPopupLayoutContentBackgroundColor key to achieve this requirement. Refer to the following code snippet for reference. 
Code Snippet: 
            <syncCore:LightTheme /> 
                <x:String x:Key="SfPopup">CommonTheme</x:String> 
                <Color x:Key="SfPopupLayoutContentBackgroundColor">Transparent</Color> 
We have also attached sample for your reference in the following link. 
Kindly let us know if you need any further assistance on this. 
Pradeep Kumar B 

JO Jorge February 8, 2021 09:51 PM UTC

Thanks, it works :)

PK Pradeep Kumar Balakrishnan Syncfusion Team February 9, 2021 05:02 AM UTC

Hi Jorge, 
We are glad that the given solution meets your requirement. Please get in touch with us if you would require any further assistance in future. 
Pradeep Kumar B 

Live Chat Icon For mobile
Up arrow icon