A quick post for you xaml/c# devs that want to get your feet wet with Windows.UI.Composition and the modern Compositor 🙂

Windows 10 introduced a new unified Compositor & API, they made it accessible to C, C++/Cx and C# devs . This compositor pretty much is what gives Windows it’s character, it draws the pixels to the screens, animates all the tiles and windows, it provides all the effects and glues all the different UI frameworks together ..

The compositor team is also closely collaborating with the Win2D open source project .. Win2D is a high level graphics library that exposes almost everything the Direct2d/DirectWrite api allows BUT in a C# friendly performant way.

Windows 10,version 10074, has the Composition Api’s however to access them you need to pretty much hack your project … This is very early bits and the api itself will not be finalized till late this year, possibly even next year .. you have been warned 🙂

//Build/ talks to watch

1. Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer

2. Introducing Win2D: DirectX-Powered Drawing in C#

3. Use New Motion and Effects Features to Captivate Users and Truly Bring Your App to Life

Enable Composition in your project

Firstly you need to disable the auto generation of the app.cs files, which contains the Main entry point for your project. We need to customize this entry point to allow the Compositor to be used..

So in your Projects properties we “Disable_Xaml_Generated_Main”

Then we create our own “Main” with a flag to allow Compositor “previewUiComposition” ..

You’ll notice we are using apisets to set the environment variable 🙂 this is the modern way to pinvoke per sae 🙂

Nuget references

The Compositor uses the Win2D effect definitions, that is how close the collaboration is between the Compositor team and the Win2D team . Hence we need to nuget reference it into our project, also there’s a dependence on the Numeric Vectors ..

Xaml

Create our UI in pure xaml, and one of those xaml elements will be the “Container” for our Compositions.. ie. we are going to “Compose” a Compositor Visual Tree within a xaml element (which I’ve called “bottomSurface”)

C#

Each XAML UIElement can have a corresponding Composition Visual to get that we use the “GetContainerVisual”

We use this container visual to compose our new UI in, in my example i am loading an image and applying a saturation effect on it and it is being rendered in that “bottomSurface” xaml uielement.

I’ve also included a slider in the UI that lets us update the saturation, and it will regenerate the effect and apply it to the existing composition visual we created above

Sample Screenshots

This is what the XAML UI looks like, notice the slider position that is different between the pictures signifying different saturation levels..

Normal (no saturation)

High Saturation

Low Saturation

Code

It’s all hosted in GitHub 🙂

Conclusion

This is very early days in the public life of the Composition api’s.

Microsoft wants us to test them out and provide feedback where possible.

This is a great opportunity to help evolve a very critical piece of the Windows platform .. 🙂