[Spec] Border

[jsuarezruiz]

Border Options

Views can't easily be given borders without nesting them in frames or implementing custom renderers.

API

The following properties need to be added on the Border static class:

public static readonly BindableProperty BorderThicknessProperty =
     BindableProperty.Create(propertyName: nameof(BorderThickness),
	     returnType: typeof(Thickness), declaringType: typeof(View));
		
public static readonly BindableProperty BorderColorProperty =
	BindableProperty.Create(propertyName: nameof(BorderColor),
		returnType: typeof(Color), declaringType: typeof(View));

And on IBorder: BorderThickness

Thickness BorderThickness { get; }
Color BorderColor{ get; }

void OnBorderThicknessPropertyChanged(Thickness oldValue, Thickness newValue);
void OnBorderColorPropertyChanged(Color oldValue, Color newValue);

Renderers will frame the given view using the given border properties

The following Views should implement the IBorder interface:

• Entry
• Button
• Frame
• DatePicker
• Picker
• TimePicker

Scenarios

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

C# Example

var entry = new Entry();
entry.BorderThickness = new Thickness (2);
entry.BorderColor = Color.Red;

XAML Example

<Entry
     BorderThickness="2"
     BorderColor="Red" />

CSS Example

.entry 
{  
    border-width: 2px;
    border-color: red;
}

Difficulty : Easy

[sacdevops]

A compact spelling might be an option for the future after reaching the first milestones. As you know it from HTML / CSS a simplified version for XAML and C#. It could read like this:
XAML
<Entry Border="2, red, solid" />

C#
var entry = new Entry(); entry.Border = new Border(2, Colors.red, BorderStyle.solid);

For example, BorderStyle is an option because it is solid by default.

[mhrastegari]

Awesome ❤

[jsuarezruiz]

Already implemented in Preview 9.