Maui: [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 RadiusProperty = BindableProperty.Create(
        nameof(Radius), typeof(double), typeof(DropShadow), 10.0d);

    public double Radius
    {
        get => (double)GetValue(RadiusProperty);
        set => SetValue(RadiusProperty, 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);
    }

    public static readonly BindableProperty OpacityProperty = BindableProperty.Create(
        nameof(Opacity), typeof(double), typeof(DropShadow), 1.0d);

    public double Opacity
    {
        get => (double)GetValue(OpacityProperty);
        set => SetValue(OpacityProperty, value);
    }
}

Scenarios

Let's see an example using C #, XAML and CSS.

C# Example

var layout = new Grid();

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

layout.Shadow = shadow;

XAML Example

<Grid>
     <Grid.Shadow>
          <DropShadow
               Radius="12"
               Color="Red"
               Offset="12, 18"
               Opacity="0.75" />
     </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

[samhouts]

Looks great!

[vhugogarcia]

Awesome! I really would like to see this feature. However, I think we can take the opportunity to improve this a little more by adding gradient shadow capabilities.

As @jsuarezruiz mentioned it here: https://github.com/dotnet/maui/issues/11

My recommendation is to enhance the "Color" property to use the new "Brushes" for gradients and solid colors.

Sample

<Grid>
     <Grid.Shadow>
          <DropShadow
               Radius="12"
               Offset="12, 18"
               Opacity="0.75">
               <DropShadow.Color>
                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
             </LinearGradientBrush>
               </DropShadow.Color>
          </DropShadow>
     </Grid.Shadow>
</Grid>

What do you think?

[Phenek]

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