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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create full screen and transparent SfPopup

Thread ID:

Created:

Updated:

Platform:

Replies:

141131 Nov 26,2018 10:41 AM UTC Feb 9,2021 05:02 AM UTC Xamarin.Forms 5
loading
Tags: SfPopup
Jan Najlepsi
Asked On November 26, 2018 10:41 AM UTC

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;


BusyDialogView

    <ContentView.Content>
        <StackLayout Opacity="0.1">
            <sfBusyIndicator:SfBusyIndicator
                AnimationType="SingleCircle"
                HorizontalOptions="Center"
                IsBusy="{Binding IsBusy}"
                TextColor="{StaticResource BusyIndicatorColor}"
                VerticalOptions="Center" />
            <Label
                Margin="0,-50,0,0"
                HorizontalTextAlignment="Center"
                Text="{Binding Title}"
                TextColor="{StaticResource BusyIndicatorColor}" />
        </StackLayout>
    </ContentView.Content>


But popup is still white background.

Vigneshkumar Ramasamy [Syncfusion]
Replied On 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:SfPopupLayout.PopupView>  
        <sfPopup:PopupView ShowHeader="False" ShowFooter="False"VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >  
            <sfPopup:PopupView.PopupStyle>  
                <sfPopup:PopupStyle BorderColor="Transparent"/>  
            </sfPopup:PopupView.PopupStyle>  
            <sfPopup:PopupView.ContentTemplate>  
                <DataTemplate>  
                    <Label BackgroundColor="Transparent" Text="Popup Content"/>  
                </DataTemplate>  
            </sfPopup:PopupView.ContentTemplate>  
        </sfPopup:PopupView>  
  
    </sfPopup:SfPopupLayout.PopupView>  
    <sfPopup:SfPopupLayout.Content>  
        <StackLayout>  
            <Button x:Name="isOpenButton" Text="Click to open popup"Clicked="isOpenButton_Clicked"/>  
        </StackLayout>  
    </sfPopup:SfPopupLayout.Content>  
</sfPopup:SfPopupLayout>  
 
We have prepared the sample as per your requirement, you can download the same from the below link.  
 
Regards,  
Vigneshkumar R 
 


Jorge
Replied On February 7, 2021 02:44 PM UTC

Does the solution is still valid?

Syncfusion.Xamarin.SfPopupLayout 18.0.4.39
Xamarin.Forms 5.0.0.1931

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....

Thanks

Pradeep Kumar Balakrishnan [Syncfusion]
Replied On 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: 
<Application.Resources> 
    <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
            <syncCore:LightTheme /> 
            <ResourceDictionary> 
                <x:String x:Key="SfPopup">CommonTheme</x:String> 
                <Color x:Key="SfPopupLayoutContentBackgroundColor">Transparent</Color> 
            </ResourceDictionary> 
        </ResourceDictionary.MergedDictionaries> 
    </ResourceDictionary> 
</Application.Resources> 
 
We have also attached sample for your reference in the following link. 
 
Kindly let us know if you need any further assistance on this. 
 
Regards, 
Pradeep Kumar B 


Jorge
Replied On February 8, 2021 09:51 PM UTC

Thanks, it works :)

Pradeep Kumar Balakrishnan [Syncfusion]
Replied On 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. 
 
Regards, 
Pradeep Kumar B 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon