Xamarin.forms: [Spec] Shadows

[jsuarezruiz]

Shadows

Shadows create visual cues in the interface, which helps the human brain differentiate the UI element that the user sees. And, this the reason why actually mobile designers favor incorporating shadows in their designs.

API

The DropShadow class provides means of creating a configurable shadow that can be applied to a Layout.

Properties

• Radius: The radius of the Gaussian blur used to generate the shadow.
• Color: The color of the shadow.
• Offset: Offset of the shadow relative to its Layout.
• Opacity: The opacity of the shadow.

public class DropShadow : BindableObject
{
    public static readonly BindableProperty ColorProperty = BindableProperty.Create(
        nameof(Radius), typeof(double), typeof(DropShadow), 9.0d);

    public double Radius
    {
        get => (double)GetValue(ColorProperty);
        set => SetValue(ColorProperty, value);
    }

    public static readonly BindableProperty ColorProperty = BindableProperty.Create(
        nameof(Color), typeof(Color), typeof(DropShadow), Color.Black);

    public Color Color
    {
        get => (Color)GetValue(ColorProperty);
        set => SetValue(ColorProperty, value);
    }    

    public static readonly BindableProperty OffsetProperty = BindableProperty.Create(
        nameof(Offset), typeof(Point), typeof(DropShadow), new Point(1, 1));

    public Point Offset
    {
        get => (Point)GetValue(OffsetProperty);
        set => SetValue(OffsetProperty, value);
    }
}

Scenarios

C# Example

var layout = new Grid();

var shadow = new DropShadow ();
shadow.Radius = 12;
shadow.Color = Color.Red;
shadow.Offset = new Point (12, 18);

layout.Shadow = shadow;

XAML Example

<Grid>
     <Grid.Shadow>
          <DropShadow
               Radius="12"
               Color="Red"
               Offset="12, 18" />
     </Grid.Shadow>
</Grid>

CSS Example

box-shadow: 12px 18px 12px 12px red;

Backward Compatibility

We already have shadows in some of the Xamarin.Forms Layouts. Frame's HasShadow property would become deprecated (it could still be used, although the use of the Shadow property would be recommended).

Scope

In this Spec, we add shadows to the different Xamarin.Forms Layouts. Specific controls, such as a Label, do not fall within the scope (they could come later).

Difficulty : medium

[rscholey]

+1 I would really like to see this for Android and iOS. The Frame shadow implementation that we currently have makes my frame look like something out of a web page 10 years ago. Need a shadow implementation that will allow us to set opacity, color and offset. Might be good to review for reference Issue #7667

[davidortinau]

Thanks @jsuarezruiz. My initial feedback:

1. I would also like to have a Spread or Distance property.

2. What CSS should we use here? CSS has text-shadow and box-shadow. In this case it would be the latter, and I think we ought to maintain that naming.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

1. What elements will support Shadow? All layouts? Button? Label? Entry?

2. What about inset shadows? While this isn’t super popular at the moment, it is a thing and I can imagine using it. Would the Offset take a negative value?

3. Can I have a XAML markup extension to do this like:

<Grid Shadow=“{20, 20, 10, #333333}”>

Or

<Grid Shadow=‘{Offset=“20, 20”, Blur=10, Color=#333333}’>

[sthewissen]

Also important to take into account: setting a corner radius clips shadows off of most things. In that regard shadows, corner radii and maybe even borders are all tightly coupled to one another. For these to co-exist with corner radii in my experience you're pretty much required to add a wrapping element around whatever control wants to take the shadow (in code). Both elements then use the same bounds and path but one provides the drop shadow and the inner one does the actual border clipping.

Another thing that comes to mind: if shadows, gradients, borders etc are all specced into Xamarin.Forms for all layouts, what will be the uniquely distinguishing feature of some of these? A Frame or BoxView seem to become obsolete if this and those other specs are eventually implemented.

[jsuarezruiz]

Thanks for the feedback @davidortinau.

1. I think I understand what you want, but could you add more details?.
2. I included the CSS sample to the Spec!.
3. Well, I thought to support Layouts that is probably the most used scenario and would cover a lot of cases. We could extend support to other controls (Views) in the future.
4. Good point. I hadn't thought about it for the Spec. I will review options on each platform and will update.
5. Similar to CSS style?. Yes, we can create a Markup Extension for that.

@sthewissen Good point. I have updated the Spec to indicate that some property would be deprecated.

[sthewissen]

Thanks :) So what do Frame or BoxView offer on top of other controls once this thing + perhaps corner radii is implemented? I understand that deprecating entire Layout types is a pretty invasive action, but I do genuinely wonder why I would use those two if a normal Grid/StackLayout can do the exact same thing?

[AlexAba]

At what stage is this issue ?

[modplug]

Please continue working on this. Shadows are such a hassle at the moment and hard to keep consistent between the different platforms 🙏

[TopSkillDeveloper]

Dear developers! Add you already normal shadows. You don't have any API gradients or radio buttons, checkboxes have only recently appeared. I am sure that with these features you will have many times more users. With respect.

[sthewissen]

Is shadow always a singular thing? On iOS one could simply add multiple CALayer objects to create different shadows in different places. On Android that does become a lot trickier though. Also what might be worth noting is that layouts supporting CornerRadius might need additional work for these shadows to look like they should. Also will probably need to find a way to get shadows and clipping to play nicely together, since simply enabling clipping means they get clipped off because they live outside of the layout.

[charlesroddie]

Better to simplify and contain this feature to Frames.

Currently Frame has inconsistent views across platforms (shadows don't display at all on UWP) and is very buggy (e.g. objects can leave their shadows behind when moved).

This API for the shadow effect, if applied to Frames only, would be a good improvement, but fixing the existing behavior should take priority.

[themronion]

Hey! Whats the status on shadows now? Should we expect them in the nearest future?

[IeuanWalker]

@jsuarezruiz the colour should also support gradients + gradient direction. Would keep all designs open then.

A bit like this control - https://github.com/roubachof/Sharpnado.Shadows
With the above control you can leave the current property 'HasShadow' alone (keeping backwards compatibility) and you can wrap any controls with it (even custom community controls).

[themronion]

A bit like this control - https://github.com/roubachof/Sharpnado.Shadows

Amazing repo btw. Added a pr to support android 4.4

[Phenek]

Could be great to add multiple Shadow for neuromorphic design.
This is the new fashion things...

[AswinPG]

Thanks :) So what do Frame or BoxView offer on top of other controls once this thing + perhaps corner radii is implemented? I understand that deprecating entire Layout types is a pretty invasive action, but I do genuinely wonder why I would use those two if a normal Grid/StackLayout can do the exact same thing?

If this was implemented it would also help with performance too right ? I really like this idea