IsVisible control property handling in Xamarin Forms Custom Renderer

Question

I have a custom control inherited from Frame. (In a nutshell, it's kind of a custom alert box which I show over the whole app content).

I am using Custom Renderer to achieve this. In xaml the control is located directly on the page (among other controls) (actually, I am creating it in the condebehind, but that makes no difference). (Implementing it for iOS so far only). The showing/hiding is initiated by IsVisible XF property. Then, I am adding the container view (native one) into the root of the app.

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsVisible")
        {
            // showing/hiding here

I am having two issues in this situation: 1. Right on this event raising the content positioning of the native view generated is not quite initialized: the iOS Frame values of the views don't have any widths/heights setup. That all probably done right after, so what I do is the following:

                Task.Run(async () =>
                {
                    await Task.Delay(10);
                    InvokeOnMainThread(() =>
                    {
                        SetupLayout();
                        Subviews[0].Alpha = 1;
                        SetupAnimationIn();
                    });
                });

... which generally works, but still not quite slightly, and the approach is neither reliable nor nice.

2. On IsVisible = false it's even worse: I cannot handle the leaving animation as the element content got destroyed by XF engine (I suppose) right after (or even before) the notification raised, so the element disappears instantly, which doesn't look nice for the user experience.

So, is there any nice way to handle those things?

Answer 1

It's probably a little late, but I thought I would offer some guidance for anyone else trying to do something similar. For (1) I'm not quite sure what you mean that the native view is not quite initialized, but here is something you might find useful:

var measurement = Measure(screenWidth, screenHeight);
var contentHeight = measurement.Request.Height;

You can read more about what the 'Measure' method does in the docs, but basically it gives you the minimum dimensions of the view element based on its content. The arguments are constraints, so use the maximum size that the view might be. You can use it to initialize the dimensions manually by setting 'WidthRequest' and 'HeightRequest'.

(2) Basically you need to override the IsVisible property like this:

public static new readonly BindableProperty IsVisibleProperty = BindableProperty.Create(
        nameof(IsVisible), typeof(bool), typeof(MyCustomView), default(bool), BindingMode.OneWay);
public new bool IsVisible
{
    get => (bool)GetValue(IsVisibleProperty);
    set => SetValue(IsVisibleProperty, value);
}

Note the use of the new keyword to override the inherited property. Of course, then you will need to handle the visibility yourself.

protected override void OnPropertyChanged(string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);

        if (propertyName == IsVisibleProperty.PropertyName)
        {
            if (IsVisible) AnimateIn();
            else AnimateOut();
        }
    }

Now you can handle the visibility however you want. Hopefully this is of some help!