How to: Create a popup
Popups use a 3rd party NuGet package – https://github.com/rotorgames/Rg.Plugins.Popup
How to use this component
Steps to create a popup –
- Create a new page (right click a folder in the solution > Add > New item > Content page)
- Change the base page type (in XAML + C#) to the NuGet package
- Then add whatever you want to the popup page
See the XAML + C# sections below for complete example.
Code Resource
Deprecated: htmlentities(): Passing null to parameter #1 ($string) of type string is deprecated in /home/site/wwwroot/wp-content/themes/huntsman-child/single-mobile.php on line 96
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage x:Class="CardiffMobileApp.Pages.General.MessagePopupPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:buttons="clr-namespace:CardiffMobileApp.Controls.Buttons"
xmlns:converter="clr-namespace:CardiffMobileApp.Converter;assembly=CardiffMobileApp"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
<pages:PopupPage.Resources>
<ResourceDictionary>
<converter:LinkPhoneNumberLabelConverter x:Key="LinkPhoneNumberLabelConverter" />
</ResourceDictionary>
</pages:PopupPage.Resources>
<ScrollView>
<Frame Margin="15"
Padding="0"
BackgroundColor="{DynamicResource PrimaryBackgroundColour}"
CornerRadius="6"
HorizontalOptions="Center"
IsClippedToBounds="True"
VerticalOptions="Center">
<!-- IMPORTANT: StackLayout needed to stretch popup -->
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
<Grid Margin="15,15,15,5"
ColumnDefinitions="*,40"
RowDefinitions="auto,auto">
<!-- Title -->
<Label Grid.Row="0"
Grid.Column="0"
FormattedText="{Binding Title}"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Style="{DynamicResource TextSection}"
VerticalOptions="CenterAndExpand"
VerticalTextAlignment="Center" />
<!-- Close Button -->
<buttons:Close Grid.Row="0"
Grid.Column="1"
Margin="0"
Clicked="BtnClose_OnClicked" />
<!-- Message -->
<Label Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
FormattedText="{Binding Message, Converter={StaticResource LinkPhoneNumberLabelConverter}}"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
Style="{DynamicResource TextBody}"
VerticalOptions="Start" />
</Grid>
</StackLayout>
</Frame>
</ScrollView>
</pages:PopupPage>
using Rg.Plugins.Popup.Pages;
using Rg.Plugins.Popup.Services;
using System;
using Xamarin.Forms.Xaml;
namespace CardiffMobileApp.Pages.General
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MessagePopupPage : PopupPage
{
public new string Title { get; set; }
public string Message { get; set; }
public MessagePopupPage(string title, string message)
{
Title = title;
Message = message;
InitializeComponent();
BindingContext = this;
}
private async void BtnClose_OnClicked(object sender, EventArgs e)
{
await PopupNavigation.Instance.PopAllAsync();
}
}
}