Surfaces and transforms

Every View can draw a background, corner radius, and shadow. These visual properties do not require a Border unless the element also needs a stroke or single-child padding container.

new Border
{
    Width = 240,
    Height = 120,
    Background = Colors.SecondaryGroupedBackground,
    CornerRadius = 20,
    CornerCurve = CornerCurve.Continuous,
    Shadow = new Shadow(
        Opacity: 0.16,
        Radius: 18,
        OffsetX: 0,
        OffsetY: 8,
        Color: Colors.Black),
    Child = content
};

The shorter new Shadow(opacity, radius, offsetY) form uses the platform's default shadow color.

Clipping

CornerRadius controls the size of the rounded corners. Its rendered value is capped at half the view's shorter arranged side, so a sufficiently large radius produces a circle for a square or a capsule for a rectangle without overlapping corners. CornerCurve selects conventional circular corners or UIKit's smoother continuous shape. To match the current system inset-grouped list surface, use both values together:

new Border
{
    CornerRadius = SystemCornerRadius.GroupedList,
    CornerCurve = CornerCurve.Continuous,
    Background = Colors.SecondaryGroupedBackground,
    Child = content
};

SystemCornerRadius.GroupedList resolves the standard inset-grouped list radius from a UIKit list cell, so it automatically follows the radius used by the current iOS release.

ClipsToBounds also clips descendants and translated content to the rounded bounds. A view's own outside shadow is clipped when an ancestor clips it, so add enough space around elevated cards or apply clipping at a deeper layer.

Opacity and transforms

card.Opacity = 0.8;
card.Translation = new Point(0, -8);
card.Scale = 1.05;
card.Rotation = 3;
card.AnchorPoint = new Point(0.5, 0.5);

Translation, scale, and rotation are visual transforms. They do not change DesiredSize, ArrangedBounds, or the space reserved by the parent. Rotation is expressed in degrees. AnchorPoint uses unit coordinates within the view and defaults to the center.

This distinction is useful for pressed states and transitions. Use margin, alignment, or layout properties when surrounding views must move as part of the result.

Tint

Tint controls the inherited accent for native content such as symbols and controls. Set a control-specific color where one exists when only that aspect should change. A null view tint inherits from its parent, page, or application window.

Tint can follow view-model state while retaining that inheritance behavior:

Tint = Bind(vm => vm.HasError)
    .ConvertTo(error => error ? Colors.Red : (Color?)null)

When the binding produces null, the view resumes inheriting its tint.