Declarative Composition

Official language support for Declarative Composition.

Usage

Under development. Not published yet.

Documentation

Under development. Not published yet.

Example

With Composition APIs, you can create a visual tree like this:

// ...

_rootVisual = _compositor.CreateSpriteVisual();
_rootVisual.Size = new(800f, 600f);
_rootVisual.Offset = new(400f, 300f, 0f);

var backgroundVisual = _compositor.CreateSpriteVisual();
backgroundVisual.RelativeSizeAdjustment = new(1f, 1f);
_backgroundBrush = _compositor.CreateColorBrush();
_backgroundBrush.Color = Windows.UI.Color.FromArgb(0x3F, 0xBF, 0xBF, 0xBF);
backgroundVisual.Brush = _backgroundBrush;
_rootVisual.Children.InsertAtTop(backgroundVisual);

_foregroundVisual = _compositor.CreateSpriteVisual();
_foregroundVisual.RelativeSizeAdjustment = new(0.9f, 1f);
var foregroundBrush = _compositor.CreateColorBrush();
foregroundBrush.Color = Windows.UI.Color.FromArgb(0xBF, 0x7F, 0x7F, 0x7F);
_foregroundVisual.Brush = foregroundBrush;
_rootVisual.Children.InsertAtTop(_foregroundVisual);

var clip = _compositor.CreateGeometricClip();
_clipGeometry = _compositor.CreateRoundedRectangleGeometry();
_clipGeometry.CornerRadius = new(4f);
_clipGeometry.Size = new(800f, 600f);
clip.Geometry = _clipGeometry;
_rootVisual.Clip = clip;

// ...

It is sometimes exhausting to wire up every component, and naming always gives us headaches... With Declarative Composition, the equivalent visual tree can be defined as:

_rootVisual : SpriteVisual {
    .size = #"new(800f, 600f)"
    .offset = #"new(400f, 300f, 0f)"
    SpriteVisual {
        .relativeSizeAdjustment = #"new(1f, 1f)"
        .brush = _backgroundBrush : ColorBrush {
            .color = #"Windows.UI.Color.FromArgb(0x3F, 0xBF, 0xBF, 0xBF)"
        }
    }
    _foregroundVisual: SpriteVisual {
        .relativeSizeAdjustment = #"new(0.9f, 1f)"
        .brush = ColorBrush {
            .color = #"Windows.UI.Color.FromArgb(0xBF, 0x7F, 0x7F, 0x7F)"
        }
    }   
    .clip = GeometricClip {
        .geometry = _clipGeometry : RoundedRectangleGeometry {
            .cornerRadius = #"new(4f)"
            .size = #"new(800f, 600f)"
        }
    }
}