Cardiff Council Content and design system

www.cardiff.gov.uk

App

viewers

Pdf page viewerMarkdown viewMap Image

popups

How to: Animate a popupHow to: Create a popupSuccess popup (page removal)Message popupSuccess popup (and or go to new route)

pages

Base pageHome pageProcess pageDetails page

layout

Section headingDividerNoteMarginsError labelHeadingHighlightAlertNotifyAnimationTextStandard header iconsLinks

input

SwitchTime pickerPickerCheckboxText editorMapSearch bar with GPSSearch addressSearch barText entry

buttons

EditCancel buttonVertical transparent buttonVertical inverted buttonTag buttonCarousel buttonCallout button (Main)Vertical buttonNext / Back buttonsClose buttonInfo buttonFull button

accessibility

AutomationProperties.IsInAccessibleTreeAutomationProperties.NameAutomationProperties.HelpTextUseful docs

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();
        }
    }
}