Overlay and Border

Overlay gives every child the same inner bounds. Later children render above earlier ones, making it useful for badges, captions, loading states, and artwork overlays.

For scrollable content with floating elements that should remain fixed, put the ScrollView and floating view in an Overlay rather than placing the overlay inside the scroller.

new Overlay
{
    Width = 280,
    Height = 180,
    CornerRadius = 18,
    ClipsToBounds = true,
    Children =
    {
        new Image
        {
            HorizontalAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Stretch,
            Source = "cover"
        },
        new Border
        {
            Height = 52,
            VerticalAlignment = VerticalAlignment.End,
            Padding = new Thickness(14, 0),
            Background = Colors.Black.WithAlpha(0.65),
            Child = new Label
            {
                VerticalAlignment = VerticalAlignment.Center,
                Text = "Now playing",
                TextColor = Colors.White
            }
        },
        new PageControl
        {
            Margin = 10,
            HorizontalAlignment = HorizontalAlignment.End,
            VerticalAlignment = VerticalAlignment.Start,
            Count = 3
        }
    }
};

The overlay's desired size is the largest visible child plus padding. Each child then uses its own horizontal and vertical alignment within the shared slot.

Border

Border is a single-child container. It combines the shared View background, corner radius, and shadow properties with padding and an optional stroke:

new Border
{
    Padding = 16,
    Background = Colors.SecondaryBackground,
    CornerRadius = 14,
    Stroke = Colors.Separator,
    StrokeThickness = 1,
    Child = new Label { Text = "Card content" }
};

The stroke is drawn inside the border and contributes to its content inset, so it does not overlap the child. Set Stroke to null or StrokeThickness to zero for no visible outline.

Clipping

CornerRadius shapes the background. Set ClipsToBounds when children must also be cut to that shape. Clipping is useful for images and layered surfaces but also clips shadows and content that intentionally extends beyond the parent.

Use Border for one framed element and Overlay for several layers. Both participate in the same measure and arrange system as every other panel.