Category Archives: Uncategorized

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


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



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



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




It’s all hosted in GitHub 🙂



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







Building a Universal XAML Twitter stream: TextBlock vs RichTextBlock vs WebView


This morning I was using my Windows Phone’s Twitter application and I was curious why the twitter stream was plain text, why did the developer choose to go with plain text for tweets … (notice in the picture below the @’s, #’s, url’s are all just plain text)

Windows Phone Tweet Stream

Windows Phone Tweet Stream

[notice : You’ll notice the coloured smileys, this is a feature of the OS where “coloured fonts” is supported 🙂 ..  You’ll see below that even Windows OS supports coloured fonts too!]

So I decided to prototype 3 different approaches to rendering a “tweet”

  1. Xaml Textblock
  2. Xaml RichTextBlock
  3. Xaml WebView that renders tweets in HTML (within a xaml app)

Twitter Library to retrieve tweets

To make things easy I used the LinqToTwitter  library.

There is a brilliant library already written that works for Universal XAML apps, its called LinqToTwitter.

It’s simple to use it ..

1. Nuget in the library into your universal apps


2. Create Authentication


3. Retrieve Tweets


4. Massage tweets into a form the UI can use




Approach 1 : using a Textblock

The first approach I used was a Listbox that renders tweets in a Textblock. This Listbox is bound to the Tweet’s ObservableCollection defined above


When the app renders the listbox it looks like this ..

using xaml textblocks to render tweets

using XAML Textblock’s to render tweets

What you’ll notice is the Textblock renders the raw tweets and all the @’s , #’s or url’s are NOT clickable/highlighted. This pretty much resembles Windows Phones Twitter app.

Performance of this approach, using a twitter stream of 100 tweets …


On several runs using a Textblock to render tweets, it averaged around 38-41MB footprint

Approach 2: using a RichTextBlock

The second approach I  wanted to highlight the @’s, #’s and url’s . So I turned the Textblock into a RichTextBlock and implemented a binding helper to turn the raw text into Paragraph and Runs.


The binding logic for RichTextBlock looks like this, what’s important to point out is the “ParseForRichTextParagraph” method where the translation from raw twitter text to ‘paragraph’ occurs.


And here is what the finished render looks like

using RichTextBlocks to render tweets

using XAML RichTextblock’s to render tweets

Performance of this approach, using a twitter stream of 100 tweets …


On several runs using a RichTextBlock to render tweets, it averaged around 44-46MB footprint

Approach 3: using a WebView

The 3rd approach I wanted to take a completely different approach of rendering the completely dynamic content of tweets with HTML .

I have always believed that the perfect UI framework would let you mix xaml/html/DirectX together. The closest we can get to that today is hosting a webview in a xaml app 🙂

So like my examples above, ill replace the Listbox with a WebView.


And I have a BindingHelper that turns the Tweets collection into HTML. Also I hooked to the Tag property so that I could bind to something.


Here is what a WebView rendering a tweet stream in xaml looks like.

using a WebView to render the tweet stream

using a XAML WebView to render the tweet stream

[note: it appears the WebView does not support coloured fonts 😦 ]

Performance of this approach, using a twitter stream of 100 tweets …


On several runs using a WebView to render tweets, it averaged around 46-49MB footprint

Demo Code

You can download the sample code here


note: I wrote this sample on Windows 10 – 9926, VS 2015 CTP 5


  1. Listbox – Textblock :  38-41MB
  2. Listbox  – RichTextBlock :  44-46MB
  3. WebView – HTML/CSS/JS :  46-49MB

I can see why the Windows Phone Twitter app would want to go with a “Raw Tweet” stream (approach 1). Every megabyte of memory footprint saved is a big deal on mobile devices.

However I personally would of taken the approach 3 (using a WebView within the xaml app) as I truly believe something as dynamic in content as a twitter stream makes more sense rendered as HTML .. 🙂

And the argument for turning the entire app into a WinJS app, sorry BUT I truly believe XAML apps are the way to go.  If you need HTML content, we have the WebView control for that 🙂

Modern Desktop – prototyping Jerry’s Windows 9 vision


I recently came across a design from one Jerry Jappinen for modernizing the “desktop” ..

I thought it would be fun to take his designs to the next level and prototype it as a WinRT-XAML-C#-SharpDx APP.

Also the goal with this post is to share my thought process on how I would go about architecting such a design.


The Design


Jerry came up with some nice ideas for the “modern” windows desktop ..






And Jerry’s “hopes and dreams” for Windows 9 …



** I personally want to call out to Jerry to thank him for sharing. Its contributions like his that makes coding up today’s prototype worth while … 🙂



My Initial Breakdown of the Design


The main elements of the designs that I can make out are …









The finished Prototype (still images)


Jumping ahead so that you can see what the end prototype looks like.

(there is a video of it running at the end of the post, these still images are not reflective of the prototype as all the animations are not visible)








Technologies I will use




Project layout


Generally for quick prototyping I like to have a simple folder structure for my assets/content/code .. The idea is to rapidly prototype ideas!




  • Assets – images, videos, general visual content
  • Controls – reusable UI components.
  • Converters – Convert data into something that the UI can use
  • Messages – MVVMLight Event Aggregator message definitions
  • Models – General data objects that is reusable and often basic types
  • Services – generic services reusable across the view models
  • ViewModel – the implementation logic behind views, generally has the “brains” of how a UI behaves and sometimes looks.
  • Views – contains the UI of the app, majority of UI is bound to VM’s and rarely do we use code behind




I always tend to start with getting the background up and running for all my projects, and the main reason is i like to be visually immersed in my app from day one. I tend to do F5 (run my app) quite a lot during the course of the day so having a stimulating background makes it so much easier to keep my creative juices flowing 🙂


The goal with the background will eventually be to render it via Direct2D and incorporate rich effects and animations. For now it will only be an image and possibly rotating between a couple of them.




This background control renders in the MainPage.xaml and is z-ordered at the very bottom of the visual tree underneath all the other visual elements







The user details of the app consists of a View and View-Model . List most of the UI in the rest of the prototype i use MVVMLight to wire up the two.





And as you can see the important bits of the UI is filled in via binding, even thou its a prototype i find it faster to knock out the V’s and VM’s



And with most of my ViewModels i always have “sample” data that is visible at design time and runtime!



And as you can see BLEND has the sample data at design time that makes styling so much easier



The rest of the components share a similar architecture, V-VM , sample data, all important bits are bound! I won’t go into too much details for the future controls, i will however highlight interesting things!




The important things to know about taskbar are ..


1. Taskbar is split up into 3 different sections (tasks, status, time) and each is layed out and flows nicely so in the future when we have different device sizes and orientations these areas can nicely flow



2. The basic unit is a TILE … These Tiles are reused all over the place and this tile is as lean as possible



3. Where possible I try to use VECTOR assets rather than bitmaps. ALL the icons in my prototype are PATHs that i took from MetroStudio and bound via the VM’s to the Views!



One of the major reasons i like using vectors is when the user ZOOM’s into my UI they retain high fidelity …


4 .When tiles animate in I try to use “Transitions” over custom storyboards or custom code ..







A window consists of a Chrome and the Content. Ill cover the content below in the “App” section..


As each “Tile” in the taskbar is clicked a Window is created and placed in a “Windows” collection and rendered via binding to the View. Its important to know that its ALL about binding ViewModel’s to Views as much as humanly possible





Windowed Apps (eg. YouTube)


Now an APP that loads within a Window’s “CONTENT” area is very interesting … The approach I’ve taken is that the XAML for the APP is defined as PURE XAML with NO CODE BEHIND.

And more importantly this APP’s XAML is “dynamically” loaded in when needed.

In the case of the YouTube app, the only APP i’ve wired up to prove my point, is a pure XAML only UI…


This XAML is dynamically loaded into the VisualTree ONLY when needed, i.e. when the YouTube app tile is clicked.



The XAML has a binding to a ViewModel that currently is embedded within the prototype app, BUT ideally these VM’s will be separated into there own dlls and hopefully in the future possibly injected/MEFed in .. Cross fingers we are allowed to do this in the future!



The XAML View binds to the VM …



My goal is to have many different XAMLs that the USER can choose from for each APP. In the case of this demo YouTube app, a user in the future may choose from several different XAML skins , each of them bound to the same VM (YoutubeViewModel)..


Performance & Tuning


At every step of the way, as i created each control and F5d to see the running progress of my prototype, I made sure to continually check the taskmanager and do relevant memory watching.. I’ve learnt to proactively trace my app upfront rather than at the very end 🙂

I’m currently at 32mb footprint, quite happy with that ..




Other Info


  • All messaging between the View Model’s/Controls/Views/Services is done via Event Aggregator …
  • View-VM binding as much as possible , near zero code behind. Note i have no issue around codebehind, i just wanted to push as much logic into my VM’s so i can easily change views when i wanted to!
  • The SharpDx rich background will come in the next blog post
  • The SpinKit styles for loading animations are awesome… 🙂
  • Total time to prototype this was about 12hrs
  • The demo works targeting x86/64, ARM!



Video of the prototype


Here’s a quick 3min video of the running prototype on my Surface RT (1st generation). Because great care was taken to target ANY CPU i could easily target ARM 🙂

The second part of the video shows me running it natively on my laptop (Intel CPU).




Demo Code


You’ll need VS2013 to run the demo code ..







This first blog post was purely to get the architecture and the major XAML pieces done .. Next step is to do the SharpDx background ..

I have to admit that the tooling story has greatly improved since last i used it, windows 8.0 version of tooling. It was a pleasure to use Blend and VS2013, i had zero blend crashes 🙂

Even after all these years, WPF, Silverlight, Jupiter … i still honestly believe XAML is the best UI technology out there! 🙂

How far will Microsoft go with HTML ?!


Let’s face it people, if you can deliver your product in HTML without compromising on UI/UX then … you should !!!

HTML is the ultimate cross platform technology, and that’s the sad truth.

I still do believe that Silverlight has a large part to play both on the web and on the desktop BUT I admit HTML5 is starting to look good for delivering simple Line of Business applications.

What I wanted to do today is discuss something interesting that I’ve been watching unfold, and that is the story of Microsoft Data Explorer.

The reason I am watching this project very closely is that it could be a sign of the future direction of Microsoft products. Bare in mind thou it is only a beta/labs project.

What’s I find interesting in this product is this

  1. it is a web application hosted on azure as a service
  2. it has a desktop, offline and connected, implementation of the application
  3. Both 1 & 2 look almost identical in functionality
  4. They appear to be aimed at a Metro style app world, that is they look like prime candidates for a future “metro style app”
  5. They are what I would categorize as “Line of Business” apps
  6. They are part of the SQL Azure family
  7. The UI technology behind the app is HTML based
  8. Considerable size Microsoft project that I would consider as embodying Microsoft’s future vision for apps.

All of these things interest me because this app could be a window into the mind of Microsoft and it’s architects. An idea of how they plan to build the next decade style LOB apps that cross desktop & metro, cloud and offline, and possibly across devices.

So let’s see how the desktop client of this product works Smile

The install can be found here, it’s early beta BUT public. I encourage you to go forth and install it and see for yourselves how all this hangs together.

It installs in the “Program Files” folder


It has an entry point known as “ClientApp”



Now this is where it gets very interesting … This is a quick analysis of the architecture of this desktop app..



It’s a Win32 app that runs

  1. ServiceHosts
  2. HttpListeners
  3. Forms that host WebBrowsers
  4. Forms that are also Javascript interceptors/windows

Basically it is a desktop app that is a local webserver serving up webcontent..

Now that is an interesting approach, imagine taking your HTML Metro Apps and having that exact codebase running on the desktop within these local webclients ..

What’s more is this local WebClient is a ASP.NET host .. yes it hosts content Smile

This is a rendered screen and the parts that make up the screen..


The root folder that the app is installed at is what is loaded into the “client website”


It consists of css , js & views (which are just ASP.NET content)







And the “BIN” folder contains the executable’s and the binaries that make the desktop client run ..


Will this architecture work in the big wide world with firewalls and port rules on local systems?!

But the idea of taking your metro style app , html ones, and having them run as is on the desktop using a similar architecture is a pretty awesome idea no ?!

I know of other Microsoft products that are going HTML and are more than likely going to follow a similar architecture.

Anyway I thought I’d share this with you, I actually like the approach BUT I have to admit the performance of this desktop app is very slow, I haven’t analysed the reasons for this as I would have expected it to be much faster running as a local web hosted application .. but go figure …

Bottom line is I like what I see … interesting times ahead in the HTML world Smile

… now back to my forever favourite technology Silverlight !!!!

Metro style app designs that are starting to excite me!


I’m really starting to like what I’m seeing in metro designs that are leaking. They’re starting to really show me what level of re-imagining Microsoft and partners/developers are making for their apps. More importantly it’s showing me the level of risk people are taking with Metro.

It’s very risky designing your apps for a metro/muti-sensor first world. Exciting times us developers/designers live in.

And I honestly am starting to see possibilities of metro style apps in the business/enterprise world. As long as these apps compliment desktop apps or can exist side-by-side in the desktop that is. I really hope MS shows us the “desktop” story!

Most of these pictures aren’t of a sufficient quality to be able to zoom into, and are generally sourced from 2 sites
















I ❤ C# 2


This post follows on from my previous post “I ❤ C#” which discusses interesting recent MS jobs that mention a lot of Managed stack work at very low system levels.

It was pointed out to me that  the “Technical Strategy Incubation Team” has been in existence , that we know of, as early as April 2011 – post reference. Possibly even earlier …

What we know of that incubation team is that it consists of some Midori folks (Mary Jo Foley – Microsoft’s Midori: Who’s on the all-star roster? )

What we can’t directly link but definitely sounds related is that this team probably has A LOT to do with Redhawk including the bit’s we’ve found in Windows 8 (SLR100.dll / WCL*.dll) .. – (Mary Jo Foley – Microsoft codename ‘Redhawk’ lives… in Windows 8 )

What’s interesting with these latest job posts is the scope of the work the incubation team is now doing. Seems like the groundwork and foundation is now in place to build amazing managed features. Things like “structured storage” or “cloud solutions” are being mentioned as areas being built on top of this new radically re thought OS stack.

What’s also interesting is the explicit mention of radical rethinking of UI/UX frameworks and the associated graphics stack/pipeline by this team. Seems like a lot has happened under the covers that hopefully will be in the Windows 8 beta dropping in 2012 Q1 (JAN-MAR).

What’s also interesting is I have been closely following Windows 8 Server as well as System Center 2012 . I did a series of tweets that covered an MS Distinguished Engineer & Lead Architect “Jeffrey Snover ” discussing Windows Server 8 – Storage Solution (I recommend you watch the video)









Apparently the storage services are .NET services running in Windows Server 8, they have a wealth of cmdlets for automating them via WMIv2/PowerShell). I wonder if this at all has anything to do with the “Incubation Team” and their work with cloud storage, as well as the new strength of C#. – job reference structured storage subsystem

This Incubation Team has a lot of juicy managed work, I’ll keep my eyes out for news/jobs relating to them for a long time Winking smile

I ❤ C#


Seems like Microsoft are forming a very interesting team called “Technical Strategy & Incubation”. Their goals are pretty all encompassing AND definitely interesting if your into UI/UX & Managed coding!

Check out these snippets from recent job posts

“help build a next generation UI/Graphics platform. This incubation team is chartered with pursuing strategic opportunities which are difficult to address incrementally with existing systems, such as UI responsiveness and security, rich applications that span devices, new web-centric programming models, and effective use of GPUs and many core ” – job quote 1 

“development of a safe concurrent programming model. A programming model is a core component of a system, 99% of which is written in type- and memory-safe C#. A core principle we add to managed code is that 1st class, statically enforced concurrency-safety must become a peer of type- and memory-safety ”  – job quote 3

“requires innovation at each layer of the software stack: programming model abstractions, scheduling (kernel and user-mode/runtime), message passing and asynchrony more generally, shared-memory, data and task parallelism, distributed parallelism, heterogeneity (including vectorization and GPGPU), interaction with processor architecture, feedback directed optimizations, and even language design and compiler implementation” – job quote 3 

“Come build the structured storage subsystem for a next-generation cloud computing platform ” – job quote 4

“You will write code in a language like C# that has the performance characteristics of C++. ” – job quote 5

“We are looking for great software developers interested in compilers and programming languages to join our team. Our goal is to build the best performing, highest-quality ahead-of-time native-code compilers in the world for C++ and C#. On the C++ side, we are building a world-class optimizing compiler for C++. On the C# side, we are building an advanced optimizing compiler that translates MSIL to native code. We have a unified compiler infrastructure that compiles C++ and C# to native code, so improvements for either language benefit the other language also” – job quote 6

so what is this incubation team

“a small hand-picked team of developers passionate about building real systems that extend the current thinking in Operating Systems and Platform technology. The Technical Strategy and Incubation team has the unique aspect of being outside of existing product groups, allowing us to pursue experimental ideas and solutions that may be impractical for existing products due to legacy demands and business commitments. This is a high visibility position with impact in the incubation, in the company, and in the overall market ” – job quote 1

“tackling the most exciting problems in our industry . Our work combines recent advances in storage with those in operating systems, programming languages, networks, and security. We’re rethinking computing from the ground up, and incubating ideas with the potential to transform our industry. ” – job quote 4

“Cloud computing is in its infancy, and Microsoft’s Technical Strategy and Incubation group is tackling the next decade’s most exciting problems. From distributed storage to advanced compilers, we’re rethinking computing from the ground up and incubating ideas with the potential to transform our industry. ” – job quote 5

“We work independently of Microsoft’s product groups, pursuing strategic opportunities that may be initially impractical for existing products due to legacy demands and business commitments. We run like a well-funded startup within Microsoft” – job quote 4 , job quote 5

“Our goal is to build the best performing, highest-quality ahead-of-time native-code compilers in the world for C++ and C# … we are pushing the state-of-the-art in compilers and using modern programming languages for systems programming” – job quote 6

and who qualifies for this team

“candidate must have a high tolerance for uncertainty and changes in direction. Comfort with low-level systems development and expert proficiency in a C-like language are required. Additional desirable, but not mandatory, skills include familiarity with GPU programming and rendering techniques, numerical algorithms and geometry, asynchronous programming models, data parallelism, concurrency, data synchronization, data-driven UI frameworks, and real-time collaboration” – job quote 1

“We are seeking an individual with experience in several of the following areas: scalable rendering engines, glitch-free media pipelines, 2D vector graphics and typography, and rich UI frameworks.” – job quote 2

“spend a significant percentage of his or her time writing code” – job quote 3

“You will have a passion for compilers, program analysis, and/or programming languages, love to make code run fast, and write high-quality code. The group is a world-class group of engineers in compilers” – job quote 6

“skills include: familiarity with C# and managed runtimes” – job quote 1 , job quote 2, job quote 3, job quote 4, job quote 5, job quote 6


a C-like language

C# is a C-like language right Winking smile


If the vision of this incubation team becomes reality then there are some damn exciting times ahead for managed programmers !!!!

Incidentally there are dozens of jobs posted for the “incubation team” … sounds like it’s a high priority !!  ❤❤❤

Big thanks to the person that sent me the link to the jobs … you know who you are!! Winking smile