Colors and materials

Visual properties such as Background accept a Brush. A Color converts to a solid brush automatically, so ordinary surfaces remain concise:

new Border
{
    Background = Colors.SecondaryBackground,
    Child = content
};

On a ContentView, Background fills the complete page beneath safe areas and translucent bars. SafeAreaEdges controls the page content's layout without clipping a color, gradient, or material assigned to the page itself.

Semantic colors

Prefer Colors.Label, SecondaryLabel, Background, SecondaryBackground, GroupedBackground, Separator, and the system accent colors. UIKit resolves them for light/dark appearance, increased contrast, and vibrancy.

Create an explicit adaptive color when the design has its own pair:

Color cardColor = Color.Dynamic(
    Color.FromHex(0xF5F5F7),
    Color.FromHex(0x242426));

Color.FromBytes accepts 8-bit channels. Color.FromHex accepts 0xRRGGBB or 0xAARRGGBB. Colors.Transparent is fully transparent. WithAlpha returns a copy with another opacity while preserving system colors and explicit light/dark variants. When a gradient or animation fades a color away, use color.WithAlpha(0) so its RGB channels interpolate from that color instead of transparent black.

Map applies a transformation to each appearance variant: dynamic colors are transformed per variant and stay dynamic, flat colors are transformed directly, and system colors keep their UIKit resolution. Derive states such as a pressed highlight from a baseline color:

Color pressed = cardColor.Map(color => color with
{
    Red = Math.Clamp(color.Red + 0.15, 0, 1),
    Green = Math.Clamp(color.Green + 0.15, 0, 1),
    Blue = Math.Clamp(color.Blue + 0.15, 0, 1)
});

When the appearances need different treatment, pass one transform per appearance: Map(light => …, dark => …). That overload always returns a dynamic color, so a flat baseline gains variants.

Gradients

new LinearGradient
{
    Stops =
    {
        new GradientStop(Color.FromHex(0x305CDE), 0),
        new GradientStop(Color.FromHex(0x8B5CF6), 1)
    },
    Start = new Point(0, 0),
    End = new Point(1, 1)
};

Gradient coordinates use unit space by default: (0, 0) is the top-leading corner and (1, 1) is bottom-trailing. LinearGradient.Vertical(...) and Horizontal(...) spread colors evenly.

Set Units to GradientUnits.Points to use UIKit points from the view's top-left origin instead. This keeps a fade at a fixed width as the view resizes:

new LinearGradient
{
    Units = GradientUnits.Points,
    Start = new Point(0, 0),
    End = new Point(72, 0),
    Stops =
    {
        new GradientStop(Color.FromHex(0x305CDE).WithAlpha(0.15), 0),
        new GradientStop(Color.FromHex(0x305CDE).WithAlpha(0), 1)
    },
    Underlay = Colors.SecondaryGroupedBackground
};

Underlay paints a solid color beneath translucent stops, so the fade remains opaque over the row background.

Animations can interpolate two gradients when they have the same number of stops, the same Units, and both use interpolatable custom colors. System colors, materials, or incompatible gradients change without an in-between value.

Materials

Material uses UIKit's native blurred surfaces:

new Border
{
    Background = new Material(MaterialKind.Thin),
    CornerRadius = 18,
    Child = controls
};

Available thicknesses run from UltraThin through Chrome. Glass uses the interactive Liquid Glass material on iOS 26 and falls back to Chrome on earlier supported versions. Materials reveal whatever is rendered behind them, so place them in an Overlay rather than over an opaque parent.

See overlay and border for surface composition, and surfaces and transforms for clipping and elevation.