Skip to content
Håvard Moås edited this page Jan 21, 2020 · 9 revisions

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

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:PopupLayout>
    <!-- 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>
    ...
    </popup:PopupLayout>

👉 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_above

Popup Direction Below

popup_below

Popup with button that close on click

popup_closeOnClick

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

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
Clone this wiki locally