[Spec] Shadows #9
Description
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).