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 StrokeThickness to zero for no visible outline. When a nullable color expression chooses no stroke, use default(Color?) for that branch.

Set StrokeDashPattern to alternating painted and unpainted lengths for a dashed stroke. A short painted length with a round cap produces dots:

new Border
{
    CornerRadius = 18,
    Stroke = Colors.Separator,
    StrokeThickness = 2,
    StrokeDashPattern = [1, 5],
    StrokeLineCap = StrokeLineCap.Round
};

Assign an empty pattern ([]) to return to a solid stroke. The stroke color, thickness, dash pattern, and line cap can all be bound and update in place.

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.