Create full screen and transparent SfPopup

[Jan Najlepsi]

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]

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.  

Sample Link: http://www.syncfusion.com/downloads/support/forum/141131/ze/PopupDemo-1737320595   

 

Regards,  

Vigneshkumar R 

 

[Jorge]

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]

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. 

Sample link 

 

Kindly let us know if you need any further assistance on this. 

 

Regards, 

Pradeep Kumar B 

[Jorge]

Thanks, it works :)

[Pradeep Kumar Balakrishnan]

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