Resize events in IMarkupExtension

[prabhavmehra]

I was wondering if there is a way to get window resize events in a MarkupExtension.

I am trying to build a rsponsive UI and currently I have been using VisualStateManager and some custom implementation of breakpoints. I tried implementating the same in a markupextension for better experience.

[stephenquan]

This can be solved with:

• Creating a ProxyElement class that detects it's ancestor ContentPage at runtime
• Establish bindings to the corresponding ContentPage.Width and ContentPage.Height respectively
• In your markup extension use the IProxyValueTarget service to find the TargetObject and instantiate your ProxyElement with it
• Then we can hook up the ContentPage.Width and ContentPage.Height property change events

The following implements a simple resize detector counter so with each page resize we bump up the counter:

public class ProxyElement : Element
{
    public static readonly BindableProperty PageProperty = BindableProperty.Create(nameof(Page), typeof(ContentPage), typeof(ProxyElement));
    public ContentPage? Page
    {
        get => (ContentPage?)GetValue(PageProperty);
        internal set => SetValue(PageProperty, value);
    }

    public static readonly BindableProperty PageWidthProperty = BindableProperty.Create(nameof(PageWidth), typeof(double), typeof(ProxyElement), default(double));
    public double PageWidth
    {
        get => (double)GetValue(PageWidthProperty);
        internal set => SetValue(PageWidthProperty, value);
    }

    public static readonly BindableProperty PageHeightProperty = BindableProperty.Create(nameof(PageHeight), typeof(double), typeof(ProxyElement), default(double));
    public double PageHeight
    {
        get => (double)GetValue(PageHeightProperty);
        internal set => SetValue(PageHeightProperty, value);
    }

    public ProxyElement()
    {
        this.SetBinding(PageProperty, static (ContentPage p) => p, BindingMode.OneWay, source: new RelativeBindingSource(mode: RelativeBindingSourceMode.FindAncestor, ancestorType: typeof(ContentPage)));
        this.SetBinding(PageWidthProperty, static (ProxyElement p) => p.Page?.Width, BindingMode.OneWay, source: this);
        this.SetBinding(PageHeightProperty, static (ProxyElement p) => p.Page?.Height, BindingMode.OneWay, source: this);
    }
}

[RequireService([typeof(IReferenceProvider), typeof(IProvideValueTarget)])]
public class ResizeDetectorExtension : Element, IMarkupExtension<BindingBase>
{
    public ProxyElement? Proxy { get; internal set; }

    int returnValue = 0;
    public int ReturnValue
    {
        get => returnValue;
        internal set
        {
            returnValue = value;
            OnPropertyChanged(nameof(ReturnValue));
        }
    }

    public object ProvideValue(IServiceProvider serviceProvider)
        => (this as IMarkupExtension<BindingBase>).ProvideValue(serviceProvider);

    BindingBase IMarkupExtension<BindingBase>.ProvideValue(IServiceProvider serviceProvider)
    {
        if (serviceProvider.GetService(typeof(IProvideValueTarget)) is IProvideValueTarget provideValueTarget)
        {
            if (provideValueTarget.TargetObject is VisualElement targetElement)
            {
                this.Proxy = new ProxyElement { Parent = targetElement };
                this.Proxy.PropertyChanged += (s, e) =>
                {
                    switch (e.PropertyName)
                    {
                        case nameof(ProxyElement.PageWidth):
                        case nameof(ProxyElement.PageHeight):
                            this.ReturnValue++;
                            break;
                    }
                };
            }
        }
        return BindingBase.Create(static (ResizeDetectorExtension t) => t.ReturnValue, BindingMode.OneWay, source: this);
    }
}