Popup

Popup

namespace DIPS.Xamarin.UI.Samples.Controls.Popup

Possibility to add a ModalityLayout that can have multiple view elements that has an attached popup behavior. This behavior will show an content above or below the view element when the user taps the view element. The outer ModalityLayout will be grayed out and non-clickable when a popup is shown on the screen.

Samples can be found here

👉 To get started, make sure you have followed the getting started steps

Example usage

We have introduced an ModalityLayout that the content that has the target element (Button) should be wrapped in. The ModalityLayout will be grayed out and non-clickable as long as any popup is present. The popup behaviour content is what will be placed inside the popup.

If you want the user to be able to click something inside of the popup to close it, add an dxui:Modality.CloseOnClick="True" to an view element of your choise.

    <dxui:ModalityLayout>
    <!-- Other content -->
    ...
            <Button Text="Opens popup on click">
                <Button.Behaviors>
                    <dxui:PopupBehavior BindingContextFactory="{Binding GetViewModel}"
                                        Direction="Above">
                        <Frame>
                            <StackLayout>
                                <Label Text="{Binding MyString}"/>
                                <Button Text="Close" dxui:Modality.CloseOnClick="True"/>
                            </StackLayout>
                        </Frame>
                    </dxui:PopupBehavior>
                </Button.Behaviors>
            </Button>
    ...
    </dxui:ModalityLayout>

👉 You can add more view elements with popup behaviours inside the same ModalityLayout.

👉 For the best user experience, you should place the ModalityLayout at the root of a page.

Look and feel

Popup Direction Above

Popup Direction Below

Popup with button that close on click

PopupBehaviour Properties

Property	Explanation	Remarks	default value
BindingContextFactory	This is a Func<object> that can be set to create a new BindingContext for the popup content when it opens.	Default is null, and this means that the BindingContext of the popup content is the same as the BindingContext of the target element.	null
Direction	Determines the direction from the target element where the popup will show.	Auto will chose Above or Below depending on the position of the target element	Auto
IsOpen	Determines if the popup is open or not. This is a bindable property.	This is another way of controling when to open the popup. Do not use the same property for multiple popups.	false
Animation	Determines how the popup is becoming visible. Either instantly by using None, sliding by using Slide and fading by Fade.		None
CloseOnOverlayTapped	Determines if the modality component should close when the overlay is tapped.		true

Closing an popup when the user clicks something inside a popup

We have added an attachable property that can be placed on any view element inside of a popup behaviour content. This will enable closing an popup when the user taps the view element. This can normally be a done-button inside of a popup.

Property	Explanation	Remarks	default value
Modality.CloseOnClick	This property will add a tapped behaviour on the view element that will close an open popup that the view element existing in.		false

Allowing multiple modals

By default, the ModalityLayout will close any open modals before showing a new modal, thus limiting simultaneously open modals to one. This behavior can be disabled by setting the property ShouldCloseOpenedModals to False.

Property	Explanation	Remarks	default value
ModalityLayout.ShouldCloseOpenedModals	Determines whether the layout should close any opened modals before opening a new one.		true