Modern Compositor for Xaml/C# devs (win10 TP)


banner

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

0

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🙂

1

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 ..

9

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”)

2

C#

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

3

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.

4

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

5

 

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)

6

High Saturation

7

Low Saturation

8

 

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 ..🙂

 

 

 

 

 

 

4 responses to “Modern Compositor for Xaml/C# devs (win10 TP)

  1. Great article. Thanks! One *very* minor point – it is “per se”, not persae.

  2. Great site ! i’m a newbie with windows 8 UI and sharpDX ( come from winforms🙂 ) so when i want to downloaded yours demo using sharpdx i’ can’t perhaps something wrong with skidrive moving to onedrive ???
    is there a another repository of all your demo code perhaps in github ?
    by the way thanks a lot for your site and articles🙂

  3. Hm. Vil bare slu00e5 fast at han Espen har helt rett. Det e nu00e5n som vet korsn ting burde vu00e6re. Og dessverre mu00e5 vi vel slu00e5 fast at han christian “stenseng” riksheim no tar feil. Su00e5 klart vi ikkje skal ha han Keiko hit. Nu00e5r det e sagt, e u00e6 gjerne u00e5pen for gode forslag. Det e jammen ikkje lett u00e5 finne trener som funke no. Stort sett kommer det jo tel u00e5 gu00e5 rett tel skaus uansett… Come on http://tropaadet.dk/maurabeach98405081845

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s