Surfaces and transforms

Compose depth, clipping, opacity, and transforms without changing layout slots.

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,
    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 shapes the surface. ClipsToBounds also clips descendants and translated content to those 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.