Popup v2 - Migration of CanBeDismissedByTappingOutsideOfPopup bindable property

[tranb3r]

I'm struggling with the migration to Popup v2, especially with the CanBeDismissedByTappingOutsideOfPopup property, that was previously a bindable property of the Popup itself.

Could you please provide an example for the migration of a XAML popup, for which the CanBeDismissedByTappingOutsideOfPopup bindable property is defined by the popup itself ? I understand I need to use PopupOptions, but I think I'm missing something...

<mct:Popup x:Class="MyPopup"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
            CanBeDismissedByTappingOutsideOfPopup="false">
    <!-- content -->
</mct:Popup>

[bijington]

I don't this is currently possible as the responsibility has shifted from the popup to the caller. Unless @TheCodeTraveler knows something I don't?

[tranb3r]

Ok...
Honestly, I don't think I understand this shift. It's even more confusing with Border and Shadow properties.
I think most PopupOptions should be controlled by the popup itself. They are part of the design of the popup.
The caller should not have to know/decide how the popup is displayed ; its responsibility should be to decide when/if the popup has to be shown.
If think it could make sense to have some global PopupOptions. But it should be possible to allow a Popup to override the global behavior.

[TheCodeTraveler]

It’s absolutely possible. All of the PopupOptions are Bindable.

You can create a new instance of PopupOptions and bind to it just like you would for any binding: https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.bindableobjectextensions.setbinding?view=net-maui-9.0#microsoft-maui-controls-bindableobjectextensions-setbinding-2(microsoft-maui-controls-bindableobject-microsoft-maui-controls-bindableproperty-system-func((-0-1))-microsoft-maui-controls-bindingmode-microsoft-maui-controls-ivalueconverter-system-object-system-string-system-object-system-object-system-object)

var options = new PopupOptions()
options.SetBinding(PopupOptions.CanBeDismissedByTappingOutsideOfPopupProperty, (TViewModel) vm => vm.CanBeDismissed);

[TheCodeTraveler]

All of the properties in PopupOptions are Bindable.

You'll create a new instance of PopupOptions and bind to it just like you would for any binding: https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.bindableobjectextensions.setbinding?view=net-maui-9.0#microsoft-maui-controls-bindableobjectextensions-setbinding-2(microsoft-maui-controls-bindableobject-microsoft-maui-controls-bindableproperty-system-func((-0-1))-microsoft-maui-controls-bindingmode-microsoft-maui-controls-ivalueconverter-system-object-system-string-system-object-system-object-system-object)

var options = new PopupOptions()
options.SetBinding(PopupOptions.CanBeDismissedByTappingOutsideOfPopupProperty, (TViewModel) vm => vm.CanBeDismissed); // replace TViewModel with the type of your View Model

[tranb3r]

@pictos
The problem is that the Options object is not a property of the Popup.
So, how can I set an Option from the Popup code?
Or, more practically speaking, how do I migrate my code?

[pictos]

The way popup are re-design now they're more like a service, you can implement your content and customize it the way you want, but if you want to customize the popup itself, then you need to use the Popup options, you can see more here in docs. I'm pretty sure that you can do it, since we migrate all our sample cases to the new popup implementation

[bijington]

As it currently stands you will have to shift the ownership of controlling the property from your Popup to the caller. I quite like the idea of still being able to set this at the Popup level though

[tranb3r]

Being able to set the options at the Popup level would not only be very logical, but it would also ease the migration.

[bijington]

With a relatively small tweak we could achieve this through an attached property by adding the following to PopupOptions

public static bool GetCanBeDismissedByTappingOutsideOfPopup(BindableObject bindable)
{
    return (bool)bindable.GetValue(CanBeDismissedByTappingOutsideOfPopupProperty);
}

public static void SetCanBeDismissedByTappingOutsideOfPopup(BindableObject bindable, bool value)
{
    bindable.SetValue(CanBeDismissedByTappingOutsideOfPopupProperty, value);
}

Then it could be called as follows:

<mct:Popup
    x:Class="CommunityToolkit.Maui.Sample.Views.Popups.NoOutsideTapDismissPopup"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    mct:PopupOptions.CanBeDismissedByTappingOutsideOfPopup="False">

It also retains the bindable nature of the property so it could be changed dynamically. The same could be true for the other style related properties and we could even include this detail in Styles.

The main issue to resolve is how to introduce it given we allow developers to pass in PopupOptions when showing a popup and how to not introduce too much complexity in deciding which value takes precedence.