Skip to content

Introduce "Composition" > "Basics" page - #2205

Open
0x5bfa wants to merge 1 commit into
microsoft:mainfrom
0x5bfa:composition1
Open

Introduce "Composition" > "Basics" page#2205
0x5bfa wants to merge 1 commit into
microsoft:mainfrom
0x5bfa:composition1

Conversation

@0x5bfa

@0x5bfa 0x5bfa commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Description

image image

Motivation and Context

@marcelwgn

  • Basics: XAML/Composition interop, Visual tree, coordinate system, transform, clip
  • Animations: keyframes, implicit animations, natural/spring animations, AnimationController, IAnimatedVisualSource
  • Expressions: CompositionPropertySet, ExpressionAnimation, ExpressionBuilder, pointer-driven expressions
  • Scroll motions: manipulation property set, parallax, sticky/shrinking headers
  • Interaction: InteractionTracker, VisualInteractionSource, inertia/source modifiers, resting points
  • Effects: effect graphs, CompositionEffectBrush, Win2D effects, blur, blend, border, layer effects
  • Brushes & surfaces: XamlCompositionBrushBase, LoadedImageSurface, surface/nine-grid/custom brushes, backdrop brush
  • Lighting: point/spot/distant/ambient lights, XamlLight, SceneLightingEffect
  • Shadows: DropShadow, mask brush, XAML interop, implicit shadow animation
  • Composition transitions: scoped batches, custom transition visuals, implicit show/hide animations
  • Scenes: scene visual/node/mesh

How Has This Been Tested?

  • Build the app
  • Check if the page works correctly

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Copilot AI review requested due to automatic review settings July 14, 2026 10:12

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new Composition > Basics entry to WinUI Gallery, introducing a dedicated sample page that demonstrates foundational XAML/Composition interop concepts (Visual retrieval, child visuals, transform matrices, and clipping).

Changes:

  • Added a new Composition category and CompositionBasics item to ControlInfoData.json, including docs links and related control wiring.
  • Introduced the new CompositionBasicsPage (XAML + code-behind) with interactive examples for visuals, anchor points, transform matrices, and inset clipping.
  • Added associated ControlExample sample-definition .txt snippets for the new page.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
WinUIGallery/SampleSupport/Data/ControlInfoData.json Adds the new Composition category and CompositionBasics item metadata (docs, image, related controls).
WinUIGallery/Samples/CompositionBasics/CompositionBasicsPage.xaml New UI page hosting Composition “Basics” demos using ControlExample.
WinUIGallery/Samples/CompositionBasics/CompositionBasicsPage.xaml.cs Code-behind implementing the Composition interop demos (Visual, child visual, transform matrix, clip).
WinUIGallery/Samples/CompositionBasics/CompositionBasicsGetElementVisual.txt Sample-definition snippet for retrieving/transforming an element Visual.
WinUIGallery/Samples/CompositionBasics/CompositionBasicsChildVisual.txt Sample-definition snippet for attaching a child SpriteVisual and using AnchorPoint/Offset.
WinUIGallery/Samples/CompositionBasics/CompositionBasicsTransformMatrix.txt Sample-definition snippet for composing multiple transforms via TransformMatrix.
WinUIGallery/Samples/CompositionBasics/CompositionBasicsClip.txt Sample-definition snippet for clipping an element via InsetClip.

Compositor compositor = ElementCompositionPreview.GetElementVisual(ChildVisualHost).Compositor;
_childVisual = compositor.CreateSpriteVisual();
_childVisual.Size = new Vector2(80);
_childVisual.Brush = compositor.CreateColorBrush(Windows.UI.Color.FromArgb(255, 0, 120, 212));
"IconGlyph": "\uE81E",
"Items": [
{
"UniqueId": "CompositionBasics",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you expect an "CompositionAdvanced" page or why is this called basics?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's the list of pages trying to implement, the one we discussed earlier.

image

Do you have something else in mind?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants