[Enhancement] Drop shadow support for iOS/UWP

[jassmith]

Rational

Drop shadows are fun, but rather platform specific in look/feel.

API

Drop shadows in Android unfortunately are implemented via Elevation which causes other changes with regards to z-order and does not provide a consistent mechanism for creating a well defined shadow. Unfortunately this makes Android an ungraceful target at best for this feature.

For iOS:

View.On<iOS>.SetShadowColor (Color color);
View.On<iOS>.SetShadowRadius (double radius);
View.On<iOS>.SetShadowOffset (Size offset);
View.On<iOS>.SetShadowOpacity (double opacity);

for UWP:

Layout.On<Windows>.SetShadowColor (Color color);
Layout.On<Windows>.SetShadowRadius (double radius);
Layout.On<Windows>.SetShadowOffset (Size offset);
Layout.On<Windows>.SetShadowOpacity (double opacity);

Expected Result

Setting the drop shadow on a view in iOS should cause that view to have a drop shadow. Setting the draw shadow on a layout in UWP should cause every view in that layout to have a drop shadow.

Ideally both sets of properties would operate on views, but UWP seems to prefer to perform these effects at the panel level.

Implementation details

Android

No change

iOS

Should be straightforward setting of CALayer properties.

UWP

https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/controls/dropshadowpanel

We will not want to use the dropshadowpanel itself, just the techniques it uses to produce the effect.

Implications for CSS

While these properties are relevant to css, I think they should remain unsupported until a general support option can be added for all platforms.

Backward Compatibility

The renderers on each platform should check BindableObject.GetIsDefault(); the behavior of the renderers should only be altered if the BindableProperty has been explicitly set. This should provide backward compatibility.

Difficulty : Easy

No obvious implementation issues stick out to me.

[deakjahn]

Android: not really Elevation but SetShadowLayer() proper.

[adhamali450]

Actually i have been trying to implement DropShadowPanel mechanism for the drop shadow effect. Actually i wrote my code copying the effect and composition code from DropShadowPanel.Xaml.cs. But i get unexpected result which is i get the shadow effect overlaying the control.

The code:

DropShadow dropShadow;
        SpriteVisual shadowVisual;
        protected override void OnAttached()
        {
            Compositor compositor = ElementCompositionPreview.GetElementVisual(Control).Compositor;
            shadowVisual = compositor.CreateSpriteVisual();
            shadowVisual.Size = new Vector2(200, 60);
            dropShadow = compositor.CreateDropShadow();
            shadowVisual.Shadow = dropShadow;

            //UpdateShadowSize
            Vector2 newSize = new Vector2(0, 0);
            if (Control is FrameworkElement contentFE)
            {
                newSize = new Vector2((float)contentFE.ActualWidth, (float)contentFE.ActualHeight);
            }
            shadowVisual.Size = newSize;

            //Some hardcoded values for now
            dropShadow.BlurRadius = 8;
            dropShadow.Opacity = 1;
            dropShadow.Offset = new Vector3(new Vector2(5, 5), 0);
            dropShadow.Color = Windows.UI.Colors.Gray;

            ElementCompositionPreview.SetElementChildVisual(Control, shadowVisual);

        }

[adhamali450]

One way to go around with this is that as long as the shadow layer overlays the actual element. We can make the whole element and it's shadow layer a shadow layer for another layout or a control. It is not a perfect solution be i'm trying to find a solution for the overlaying issue. so here is the Xaml to accomplish this:

<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="350" HeightRequest="350">
        <BoxView HorizontalOptions="Fill" VerticalOptions="Fill"> <!--shadow layer-->
            <BoxView.Effects>
                <effects:UwpDropShadowEffect />
            </BoxView.Effects>
        </BoxView>
        <Grid BackgroundColor="WhiteSmoke">
            <!--Main content goes here-->
        </Grid>
    </Grid>

BoxView is not bad. Since it's the control Most XamarinForms developers use for back-dropping and stuff
similar to this.

Result:

[adhamali450]

One of the issues we might encounter that the shadow is only rectangular. If the shadow is applies directly to the element, we can solve this using masks. However, this cannot be done on the content layer since the shadow is technically applied for whole another element and we are just overlaying stuff

[deakjahn]

I tried with a PlatformEffect. See this SO item: https://stackoverflow.com/questions/51580042/drop-shadow-is-above-the-text

[adhamali450]

Yes, this is the same issue i have. The shadow overlays the element. Actually if you take a look at the DropShadowPanel in the WindowsCommunityToolkit you would find that the shadow layer is applied to a border beneath the content and it makes sense as the border would have the shadow mask of the content if the content is one of the element that supports shadow masks. e.g. TextBlock, Image etc.
And the shadow would seem to be applied on the content but it's not

[ChrisTTian667]

Actually, i don't get how it should work. Is there an example on how to use it somewhere?

i tried AdhamAliAhmeds solution, which i got to work, but the dropshadow gets no size when the BoxView is used within a ListView. I maybe can react on size changes, but this will result in performance issues (at least in my solution).