Xamarin Forms Delay in Navigation - xaml

Question

I am working on a Xamarin Forms Project and stuck with an issue, where I want to open some popups. As Forms does not have in build Popups so, I have different XAML pages and I’m loading them inside my MainPage.xaml and changing the visibility when required.
Popup_1.xaml
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
x:Class="ABC.Views.Popup_1">
<StackLayout >
<Label Text="{Binding FirstName}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
</StackLayout>
I have many layouts like Popup_1 which I want them to be shown as popup. Here’s my MainPage.xaml here contains 3 popup layouts.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPagexmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
xmlns:controls="clr-namespace:ABC.Views;assembly=ABC"
x:Class="ABC.Views.MainPage">
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_1}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_1 />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_2}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_2 />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_3}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_3 />
</StackLayout>
</AbsoluteLayout>
</ContentPage>
The problem is when I am trying to navigate to Mainpage.xaml it taking a lot of time to navigate. Is there any standard solution for this issue? or How can I deal with this delay ?
Note: I’m using MVVM binding pattern to change the visibility of layouts.

Answer 1

You're right about to use ContentPage to customize your own popup dialog, but the normal way to show this custom dialog is not setting the visibility of the parent element of your dialog. We need to display it using PushModalAsync and dismiss it using PopModalAsync.
For code sample you can refer to PushModalAsync or PopModalAsync.
I'm not sure what blocks your UI to cause the delay of navigation since you didn't post any code behind of your dialog. Anyway, you can try to push and pop a modal page and see if this helps.

Answer 2

As Forms does not have in build Popups
Refer this page of documentation
https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/pop-ups/