Display Popup Using Absolute Layout In Xamarin.Forms

This article demonstrates how to display a popup using the Absolute layout in Xamarin.Forms.

We have to do the following things to display popup in Xamarin.Forms.

• In the Start screen, launch Visual Studio. This opens the Start page.
  
  
  
  
  
• In Visual Studio, click "Create new project..." to create a new project.
  
  
  
  
  
• In the New project window, click Cross-Platform from the left pane, select the Mobile App (Xamarin.Forms) template, set the Name and Solution name to DisplayPopUp , choose a suitable location for the project, and click the OK button.
  
  
  
  
  
• In the New Cross Platform App dialog, click Blank App, select .NET Standard as the Code Sharing Strategy, and click the OK button.
  
  
  
  
  
• In Solution Explorer, the DisplayPopUp project will be displayed like below.
  
  
  
  
  
• Now, open XAML and paste the following code in it.
  
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:DisplayPopUp"
  5. x:Class="DisplayPopUp.MainPage">
  7. <AbsoluteLayout>
  9. <!-- Normal Page Content -->
  10. <StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
  11. AbsoluteLayout.LayoutFlags="All">
  12. <Button Text="Display Popup"
  13. FontSize="Large"
  14. VerticalOptions="CenterAndExpand"
  15. HorizontalOptions="Center"
  16. Clicked="OnButtonClicked" />
  17. </StackLayout>
  19. <!-- Overlay -->
  20. <ContentView x:Name="overlay"
  21. AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
  22. AbsoluteLayout.LayoutFlags="All"
  23. IsVisible="False"
  24. BackgroundColor="#C0808080"
  25. Padding="10, 0">
  27. <StackLayout Orientation="Vertical"
  28. BackgroundColor="White"
  29. HorizontalOptions="Center"
  30. VerticalOptions="Center"
  31. Padding="10">
  33. <Label FontSize="18"
  34. TextColor="Green"
  35. HorizontalOptions="Fill"
  36. Text="Add 2 Values" />
  38. <BoxView Color="Gray"
  39. HorizontalOptions="FillAndExpand"
  40. HeightRequest="1.5">
  41. </BoxView>
  43. <Entry x:Name="entryFirstVal"
  44. Placeholder="First value"
  45. TextColor="Black"
  46. VerticalOptions="CenterAndExpand"
  47. HorizontalOptions="FillAndExpand"/>
  49. <Entry x:Name="entrySecondVal"
  50. Placeholder="Second value"
  51. TextColor="Black"
  52. VerticalOptions="CenterAndExpand"
  53. HorizontalOptions="FillAndExpand"/>
  55. <Label FontSize="18"
  56. TextColor="Orange"
  57. HorizontalOptions="Fill"
  58. x:Name="lblResult" />
  60. <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
  62. <Button Text="Cancel" FontSize="Large"
  63. VerticalOptions="CenterAndExpand"
  64. HorizontalOptions="Center"
  65. Clicked="OnCancelButtonClicked"/>
  67. <Button Text="Add" FontSize="Large"
  68. VerticalOptions="CenterAndExpand"
  69. HorizontalOptions="Center"
  70. Clicked="OnAddButtonClicked" />
  71. </StackLayout>
  73. </StackLayout>
  76. </ContentView>
  77. </AbsoluteLayout>
  78. </ContentPage>

• Open MainPage.xaml.cs, and paste the following code in it.
  
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Xamarin.Forms;
  8. namespace DisplayPopUp
  9. {
  10. public partial class MainPage : ContentPage
  11. {
  12. public MainPage()
  13. {
  14. InitializeComponent();
  15. }
  17. protected void OnButtonClicked(object sender, EventArgs args)
  18. {
  19. overlay.IsVisible = true;
  20. }
  22. protected void OnAddButtonClicked(object sender, EventArgs args)
  23. {
  24. int firstVal = Convert.ToInt32(entryFirstVal.Text);
  25. int secondVal = Convert.ToInt32(entrySecondVal.Text);
  26. lblResult.Text = Convert.ToString(firstVal + secondVal);
  27. }
  29. protected void OnCancelButtonClicked(object sender, EventArgs args)
  30. {
  31. overlay.IsVisible = false;
  32. }
  33. }
  34. }

• Now, set either Android or iOS project as a start-up and run the application so you will see the output as below.
  
  
  

If you click on “DISPLAY POPUP” button, the page shown in the following window will open.

In the above screen, there is one popup and it is asking for 2 values to enter. After entering the values if the user clicks on “ADD” button result is displaying Orange color. Similarly, if the user clicks on “CANCEL” popup will be dismissed.

To view full source code, please click here.

Please raise your doubts in the comments section and I will reply with answers.

Thanks for reading the article.