Windows.​UI.​Composition Windows.​UI.​Composition Windows.​UI.​Composition Namespace

Provides APIs for user interface composition.

**Windows.UI.Composition Overviews, Samples, and Known Issues**
Windows.UI.Composition OverviewOverview and architecture of the API
Windows.UI.Composition SamplesAPI samples in the official Github
Known Issues and Latest InformationLatest updates on the API in the MSDN Forums


AmbientLight AmbientLight AmbientLight

A light that illuminates every targeted Visual equally.

ColorKeyFrameAnimation ColorKeyFrameAnimation ColorKeyFrameAnimation

A time-based animation that targets the Color property with one or more color key frames.

The ColorKeyFrameAnimation class is one of the supported types of KeyFrameAnimation s that is used to animate the Color property off of the Brush property on a SpriteVisual. When working with ColorKeyFrameAnimation s, utilize Windows.UI.Color objects for the values of keyframes. Utilize the InterpolationColorSpace property to define which color space the system will interpolate through for the animation.

CompositionAnchor CompositionAnchor CompositionAnchor


CompositionAnimation CompositionAnimation CompositionAnimation

Represents the base animation class.

CompositionAnimationGroup CompositionAnimationGroup CompositionAnimationGroup

Defines a group of animations.

CompositionAnimationGroup provides a way to group CompositionAnimation s in a list which will be started at the same time when StartAnimationGroup is called on CompositionObject. All ComositionAnimation in CompositionAnimationGroup need to assign a value to the Target property in the animation itself. CompositionAnimationGroup can also be associated with ImplicitAnimationCollection as an animation that gets executed as a result of a trigger.

CompositionBackdropBrush CompositionBackdropBrush CompositionBackdropBrush

A brush that applies an effect (or a chain of effects) to the region behind a SpriteVisual.

CompositionBatchCompletedEventArgs CompositionBatchCompletedEventArgs CompositionBatchCompletedEventArgs

Arguments for the CompositionCommitBatch.Completed or CompositionScopedBatch.Completed events.

CompositionBrush CompositionBrush CompositionBrush

Base class for brushes used to paint a SpriteVisual.

CompositionCapabilities CompositionCapabilities CompositionCapabilities

Allows ability to check system hardware capabilities in order to gracefully scale effects performantly.

CompositionClip CompositionClip CompositionClip

Base class for clipping objects such as InsetClip.

CompositionColorBrush CompositionColorBrush CompositionColorBrush

Paints a SpriteVisual with a solid color.

CompositionCommitBatch CompositionCommitBatch CompositionCommitBatch

A group of active animations or effects.

CompositionDrawingSurface CompositionDrawingSurface CompositionDrawingSurface

A drawing surface for interoperation with Direct2D or Direct3D.

CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction

Base class for interpolator functions to use with KeyFrameAnimations.

The CompositionEasingFunction class is the base class for easing functions that are used with KeyFrameAnimation s. Easing functions are used to describe how the system interpolates between two different keyframes. Currently, there are three supported easing functions: Linear, Cubic Bezier and Step.

CompositionEffectBrush CompositionEffectBrush CompositionEffectBrush

A brush contianing an effect created with the CompositionEffectFactory.CreateBrush method.

CompositionEffectFactory CompositionEffectFactory CompositionEffectFactory

Creates a composition object which contains a Win2D effect description format in the Microsoft.Graphics.Canvas.Effects namespace.


Effects that are not supported are marked as [NoComposition] in the Win2D API Reference for effects namespace.

CompositionEffectSourceParameter CompositionEffectSourceParameter CompositionEffectSourceParameter

Used to declare an arbitrary name (a String) to be associated with a CompositionBrush (the “effect source”). The association of the given name and the effect source occurs when the SetSourceParameter method of a CompositionEffectBrush is called.

CompositionGraphicsDevice CompositionGraphicsDevice CompositionGraphicsDevice

Used to create all hardware bound resources for a given DirectX device on a compositor session. CompositionGraphicsDevice contains a DirectX device that is used to perform the GPU operations. Developers can obtain a Graphics device from the compositor top level object.

CompositionIsland CompositionIsland CompositionIsland


CompositionIslandEventArgs CompositionIslandEventArgs CompositionIslandEventArgs


CompositionLight CompositionLight CompositionLight

Base class for a light source that can target a UI scene.

The CompositionLight.Targets property determines which Visuals are lit.

CompositionMaskBrush CompositionMaskBrush CompositionMaskBrush

A brush that paints a SpriteVisual with masked content.

CompositionMaskBrush provides an optimized method for masking surfaces or solid color rectangles with opacity mask surfaces.

CompositionNineGridBrush CompositionNineGridBrush CompositionNineGridBrush

Paints a SpriteVisual after applying Nine-Grid Stretching to the contents of its Source brush.

CompositionObject CompositionObject CompositionObject

Base class of the composition API representing a node in the visual tree structure.

Composition objects are the visual tree structure on which all other features of the composition API use and build on. The API allows developers to define and create one or many Visual objects each representing a single node in a Visual tree.

CompositionPropertySet CompositionPropertySet CompositionPropertySet

Stores values as key-value pairs. CompositionPropertySet s are CompositionObject s that allow storage of key values pairs that can be shared across the application and are not tied to the lifetime of another composition object. CompositionPropertySet s are most commonly used with animations, where they maintain key-value pairs that are referenced to drive portions of composition animations. CompositionPropertySet s provide the ability to insert key-value pairs or retrieve a value for a given key. For more information on using CompositionPropertySet with animations, see the Animations Overview page.

CompositionScopedBatch CompositionScopedBatch CompositionScopedBatch

An explicitly created group of active animations or effects.

CompositionShadow CompositionShadow CompositionShadow

Base class for shadows that can be applied to a SpriteVisual.

CompositionSurfaceBrush CompositionSurfaceBrush CompositionSurfaceBrush

Paints a SpriteVisual with pixels from an ICompositionSurface.

CompositionTarget CompositionTarget CompositionTarget

Represents the window on which to display the composition tree.

CompositionVirtualDrawingSurface CompositionVirtualDrawingSurface CompositionVirtualDrawingSurface

Represents sparsely allocated bitmaps that can be associated with visuals for composition in a visual tree.�

Compositor Compositor Compositor

Manages the session between an application and the system compositor process.

The Compositor class creates an instance of the Compositor for the application that can be used as a factory for a variety of types in the Windows.UI.Composition namespace spanning the visual layer, effects system and animation system. The Compositor class also manages the lifetime of objects created from the factory.

ContainerVisual ContainerVisual ContainerVisual

A node in the visual tree that can have children.

CubicBezierEasingFunction CubicBezierEasingFunction CubicBezierEasingFunction

Represents a cubic-bezier function for interpolating between animation key frames.

The cubic-bezier function is one of the more common easing functions used with KeyFrameAnimation s and are used frequently to describe smooth curves that can be scaled. Cubic-bezier functions are defined by two “control points” of type Vector2 that define the shape of the curve. When used, the animating property will change in between two keyframes based on the defined curve.

DistantLight DistantLight DistantLight

An infinitely large distant light source that emits light in a single direction. For example, a distant light could be used to represent sunlight.

DropShadow DropShadow DropShadow

A drop shadow cast by a SpriteVisual.

ExpressionAnimation ExpressionAnimation ExpressionAnimation

A Composition Animation that uses a mathematical equation to calculate the value for an animating property every frame.

The core of ExpressionAnimation s allows a developer to define a mathematical equation that can be used to calculate the value of a targeted animating property each frame. This contrasts KeyFrameAnimation s, which use an interpolator to define how the animating property changes over time. The mathematical equation can be defined using references to properties of Composition objects, mathematical functions and operators and Input. Expression Animations open the door to making experiences such as sticky headers and parallax easily describable.

For a detailed walkthrough of using Composition ExpressionAnimation, check out the Animations Overview document.

ExpressionProperties ExpressionProperties ExpressionProperties


FramedIslandSite FramedIslandSite FramedIslandSite


HwndIslandSite HwndIslandSite HwndIslandSite


ImplicitAnimationCollection ImplicitAnimationCollection ImplicitAnimationCollection

A collection of animations triggered when a condition is met.

Implicit Animations will help drive animations for an application using triggers as way to start animations. Implicit animation helps decouple kicking off animation from app logic. Composition does the work of executing animations based on trigger execution. App developers define animations which they want to execute, and the events that trigger these animations. Composition then executes these animations when the appropriate trigger conditions are met.

InsetClip InsetClip InsetClip

Clips a portion of a visual. The visible portion of the visual is a rectangle defined as inset values from the edges of the visual. The portion of the visual outside the rectangle is clipped.

InsetClips are defined using offsets from the bottom, left, right and top of the Visual to be clipped in pixels. It is possible to fully clip the entire Visual. Negative values are allowed. InsetClips support all the same transforms as Visuals except the 4x4 matrix. Unlike Visuals, InsetClips are 2D and are defined, instead, with a 3x2 matrix. InsetClip properties are fully animatible.

KeyFrameAnimation KeyFrameAnimation KeyFrameAnimation

A time-based animation with one or more key frames. These frames are markers, allowing developers to specify values at specific times for the animating property. KeyFrame animations can be further customized by specifying how the animation interpolates between keyframes.

LayerVisual LayerVisual LayerVisual

A ContainerVisual whose children are flattened into a single layer.

LinearEasingFunction LinearEasingFunction LinearEasingFunction

Represents a linear function for interpolating between animation key frames.

The linear function of another supported easing function that can be used with KeyFrame Animations. When used, the animating property will change in between two KeyFrames linearly over time.

PointLight PointLight PointLight

A point source of light that emanates light in all directions.

PopupIslandSite PopupIslandSite PopupIslandSite


QuaternionKeyFrameAnimation QuaternionKeyFrameAnimation QuaternionKeyFrameAnimation

A time-based animation that targets the Orientation property with one or more key frames.

The QuaternionKeyFrameAnimation class is one of the supported types of KeyFrameAnimation s that is used to animate the Orientation property on a Visual. Quaternions are a useful and sometimes simpler way to think about rotations – Quaternions take the shortest path between angles and avoid issues like Gimbal Lock that rotation angle/axis and rotation matrices run into. A Quaternion is made up of two components: a scalar and vector part.

RenderingDeviceReplacedEventArgs RenderingDeviceReplacedEventArgs RenderingDeviceReplacedEventArgs

Arguments for the RenderingDeviceReplaced event.

ScalarKeyFrameAnimation ScalarKeyFrameAnimation ScalarKeyFrameAnimation

A time-based animation that targets any Scalar-based property with one or more key frames.

SpotLight SpotLight SpotLight

A light source that casts inner and outer cones of light. For example, a flashlight.

SpriteVisual SpriteVisual SpriteVisual

Hosts 2D boxed content of type CompositionBrush. CompositionBrush can be either a CompositionColorBrush, a CompositionSurfaceBrush or a CompositionEffectBrush. Any part of the visual not covered by pixels from the brush are rendered as transparent pixels.

StepEasingFunction StepEasingFunction StepEasingFunction

A step function for interpolating between animation key frames.

Advances animations in increments like steps which can be can be defined. Behaviors for initial and final steps can be customized.

Vector2KeyFrameAnimation Vector2KeyFrameAnimation Vector2KeyFrameAnimation

A time-based animation that targets any Vector2-based property with one or more key frames.

Vector3KeyFrameAnimation Vector3KeyFrameAnimation Vector3KeyFrameAnimation

A time-based animation that targets any Vector3-based property with one or more keyframes.

Vector4KeyFrameAnimation Vector4KeyFrameAnimation Vector4KeyFrameAnimation

A time-based animation that targets any Vector4-based property with one or more keyframes.

Visual Visual Visual

The base object in visual tree.

VisualCollection VisualCollection VisualCollection

Represents a collection of visual instances.

VisualIslandSite VisualIslandSite VisualIslandSite


VisualIslandSiteEventArgs VisualIslandSiteEventArgs VisualIslandSiteEventArgs


VisualTreeIsland VisualTreeIsland VisualTreeIsland


VisualUnorderedCollection VisualUnorderedCollection VisualUnorderedCollection

An unordered collection of visuals.


ICompositionAnimationBase ICompositionAnimationBase ICompositionAnimationBase

Base class for composition animations.

ICompositionIslandSite ICompositionIslandSite ICompositionIslandSite


ICompositionSurface ICompositionSurface ICompositionSurface

Represents the content of a SpriteVisual. All object types that can be set as content of a SpriteVisual must implement this interface. For example, CompositionImage is one of the content types that implements ICompositionSurface. A single ICompositionSurface can be set as content for multiple SpriteVisual(s).

IVisual3 IVisual3 IVisual3



AnimationDelayBehavior AnimationDelayBehavior AnimationDelayBehavior

Specifies the animation delay behavior.

AnimationDirection AnimationDirection AnimationDirection

Specifies the play direction of an animation.

AnimationIterationBehavior AnimationIterationBehavior AnimationIterationBehavior

Specifies if the animation should loop.

AnimationStopBehavior AnimationStopBehavior AnimationStopBehavior

Specifies the behavior of an animation when it stops.

CompositionBackfaceVisibility CompositionBackfaceVisibility CompositionBackfaceVisibility

Specifies whether the back face of a visual is visible during a 3D transform.

CompositionBatchTypes CompositionBatchTypes CompositionBatchTypes

Batch types for CompositionCommitBatch and CompositionScopedBatch.

CompositionBitmapInterpolationMode CompositionBitmapInterpolationMode CompositionBitmapInterpolationMode

Specifies the algorithm used for interpolating pixels from ICompositionSurface when they do not form a one-to-one mapping to pixels on screen.

CompositionBorderMode CompositionBorderMode CompositionBorderMode

Controls the aliasing behavior on the edges of visual borders.

CompositionColorSpace CompositionColorSpace CompositionColorSpace

Specifies the color space for interpolating color values in ColorKeyFrameAnimation.

CompositionCompositeMode CompositionCompositeMode CompositionCompositeMode

Determines how a non-opaque visual's content is blended with the background content behind the visual.

CompositionDropShadowSourcePolicy CompositionDropShadowSourcePolicy CompositionDropShadowSourcePolicy


CompositionEffectFactoryLoadStatus CompositionEffectFactoryLoadStatus CompositionEffectFactoryLoadStatus

The status of the asynchronous compilation of a shader for an effect description.

CompositionGetValueStatus CompositionGetValueStatus CompositionGetValueStatus

Indicates the outcome of an attempt to retrieve the value of a key-value pair.

CompositionIslandVisibilityHints CompositionIslandVisibilityHints CompositionIslandVisibilityHints


CompositionStretch CompositionStretch CompositionStretch

Specifies how content is scaled when mapped from its source to a destination space.