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>