Shadow in UIView cannot overlay Entry or Editor or Picker in Xamarin Forms

Question

I added an RoutingEffect in Xamarin Form project and PlatformEffect in my Xamarin.iOS project. It will add effect to Stacklayout. The Stacklayout in this demo is a custom navigation bar. The below of navigation bar is a scrollview has many cells (label, entry, picker).

I implemented in Android is OK. But in iOS has problem: Shadow effect cannot overlays some controls, such as: Entry, Editor, Picker. Could you share me how to fix it? This is code in Xamarin.iOS project.

public class DropShadowEffect : PlatformEffect
{
    protected override void OnAttached()
    {
        try
        {
            var effect = (myDemo.UIControls.DropShadowEffect)Element.Effects.FirstOrDefault(e => e is myDemo.UIControls.DropShadowEffect);

            if (effect != null)
            {
                Container.Layer.CornerRadius = effect.Radius;
                Container.Layer.ShadowColor = UIColor.Red.CGColor;// effect.Color.ToCGColor();
                Container.Layer.ShadowOffset = new CGSize(effect.DistanceX, effect.DistanceY);
                Container.Layer.ShadowOpacity = 0.8f;
                Container.Layer.ShadowRadius = 2f;
                Container.Layer.ShouldRasterize = true;
                Container.Layer.MasksToBounds = false;
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine("Cannot set property on attached control. Error: {0}", ex.Message);
        }
    }

*Shadow effect overly Label is OK

*Shadow effect cannot overlay either Picker or Entry

Lucas Zhang Lucas Zhang · Accepted Answer · 2018-11-26T04:42:35

Cause:

Actually, such as Label will still overlay the shadow.But it doesn't seem obvious.If you set the background of label (such as red ),you will see the overlay.

Solution:

You can set the BackgroundColor of the Picker and Entry in the custom renderer to let the alpha as 0.

For example in EntryRenderer

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.BackgroundColor = new UIColor(1,1,1,0);//The last parameter sets the alpha of backgound as transparent
            Control.Layer.MasksToBounds = true;
            Control.Layer.CornerRadius = xxx;  //set the rounded corner
            Control.Layer.BorderColor = UIColor.xxx.CGColor;
            Control.Layer.BorderWidth = xxx;           
        }

    }

Shadow in UIView cannot overlay Entry or Editor or Picker in Xamarin Forms

1 Answers