Corner Treatments

[PureWeen]

Layout Corner APIs

The following APIs will be applicable to all elements that are able to support the native level shapes. Currently this should just be for Cards and Buttons

public namespace Xamarin.Forms
{
    public class CornerShapeModel
    {
        public CornerTreatment TopLeft;
        public CornerTreatment TopRight;
        public CornerTreatment BottomLeft;
        public CornerTreatment BottomRight;
    }

    public enum UnitType
    {
        Percentage, Points
    }

    public class CornerTreatment
    {
    }

    public class RoundedCornerTreatment : CornerTreatment
    {
        public double Radius { get; set; }
        public UnitType Unit { get; set; }
    }
    public class CutCornerTreatment : CornerTreatment
    {
        public double Size { get; set; }
        public UnitType Unit { get; set; }         
    }

    public static CornerShapeModel Corners { get; set; } //BP
}

<Button CornerShape="cut:5%, circle:4, circle:10, cut:3%">
</Button>
<Frame CornerShape="cut:5%, circle:4, circle:10, cut:3%">
</Frame>

<!-- this will just apply circles to everything -->
<Button CornerShape="circle:5%, 4, 10, 3%">

<!-- defaults to round -->
<Button CornerShape="5%, 4, 10, 3%">
</Button>

[mattleibow]

Would the shadow ever be different?

[PureWeen]

@mattleibow possibly?

https://github.com/material-components/material-components-ios/blob/a0810b574649546bd27e330818e1575c5e0a6518/components/ShadowLayer/src/MDCShadowLayer.h#L25

I need to play with the effect of those apis some
Need to at least add some offsets for the shadow so people can position the shadow

Android doesn't look like it has as many things to tweak out of the box though

[krdmllr]

Why is this added to material and not forms itself :)?

[PureWeen]

Why is this added to material and not forms itself :)?

@krdmllr

The current reasoning here is that the Material libraries (especially iOS) provide a number of controls (MDCShadowLayer, MDCShapes, etc..) that make this kind of edge treatment much simpler to achieve. So we definitely could achieve all of this at the forms level without material but the level of effort with material is much lower. There are aspects of this work that will most likely be useful for non material but using material lets us achieve these richer results much quicker.

[mattleibow]

This is looking better. It might be helpful to add the cut and square and the others to see what properties they will have.

[PureWeen]

@mattleibow iOS supports triangle but Android doesn't look like it has the same one
So for now I added one for Cut. Once we get the easier ones that already have native working then we can add some additional ones

[mattleibow]

Having a look at GridLength i see we are using a struct, so maybe instead of having treatments separate (which allow for extensibility) we can use a new "corner treatment unit"

struct CornerTreatment {
  UnitType Unit;
  double Size;
  CornerType Type;
}

I am not sure if that is better.

And on a separate note, i see we have GridUnitType to be Pixel instead of Dp - which is probably better since we are always working in dip, and it just looks better.