-
Notifications
You must be signed in to change notification settings - Fork 12
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
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.
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 |
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 |
- ContentControl
- DataTemplateSelectors
- Date- and TimePicker
- Modality
- Contextual Menus
- RadioButton
- TrendGraph
- Tag
- Toast