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

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.

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.

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.