MVP Summit 2013

I’ve been an MVP for 5 years, the first year was as an Expression Blend MVP, the next 4 years were/are for Silverlight (I’m still an MVP)!

Going to the MVP summit is a massive trek for an Aussie like me, its a very painful 20+ hour flight(door-to-door) so for the last 4 years I passed on the trip.

However this 5th year I decided to go because like most of my Silverlight colleagues we felt it could be our last,

Besides my fascination with Silverlight (all things XAML really) I’m also an avid follower of technologies that help me create crazy UI/UX experiences so delving into HTML/DirectX is not uncommon! And I also like to know the very low level details of the technologies I use, so hacking at the bits in the runtimes is part of what I do

This is what I wanted to get out of the MVP summit…

 

1. Finding out about MS’s future strategies for XAML/HTML/DirectX, the UI stacks in Windows / Windows Phone / XBox and its other platforms.

2. Finding out about the .NET strategy .

3. Talk to experts in 1 & 2 above both from MS and from other MVP’s

I had a clear goal what I wanted to do on my trip!

 

And this is what I got out of the MVP Summit (and I’m being very careful not to break NDA here) …

 

1. put faces to twitter names, hung out and discussed cool stuff ! Invaluable!

2. “This info is off limits”, “Can’t talk about that” for a lot of the stuff I wanted to know about (XAML & WinRT)

3. Confirmed my suspicions on the .NET strategy, confirmed what I was seeing in Windows Phone 7/7.5/8 and WinRT/.NETCore . There is a lot going on that has been brewing for many many years. We have been seeing it in Silverlight 3/4/5 and in Silverlight on Windows Phone. BUT it all made sense after some of the sessions and discussions with MS folk. Can’t really say much more !

4. Learned of 2 multi-year hush-hush projects that are as encompassing as Roslyn that explains a lot of what’s been going on with Silverlight

5. Saw that MS teams that adopted xaml (wpf / silverlight) early are in a great position to become agile going forward. These designers/developers are what i consider experts in XAML and can bend it to there wills, they are now in a great position to deliver agile UI/UX updates to us for there respective products!

6. SurfaceRT with TypeCover + OneNote is perfect for conferences, i must of typed the equivalent of 20 pages of notes..

7. The MS folks that were available to us were great people that wanted to be as open as possible BUT couldn’t. They really do care about the developer community BUT MS are at an inflection point with there tooling/frameworks/runtimes, and so they were not allowed to discuss such things!

8. This was the general tone of my introduction to people …

me: Hi

MVP 1: Hi, I’m david

me: Hey I’m Jose ..

MVP 1: ohhh (looking down at my tag)… your a Silverlight MVP …. <long uncomfortable pause> … im sorry!

me:  its all cool!

 

9. Blend Tooling has been playing catch up for 3 years. Lots of refactoring and bringing in new platforms ,XAML-WinRT and HTML-CSS-WinJS, has caused Blend to stagnate in the innovative features category. They have smart people working on the blend tooling BUT seems like they still have about another year to go with all this convergence … Overall I liked what I “heard” from the Blend team and of the direction of it in VS .. Just sad that WPF/SL had to suffer! (note i said HEARD because we really didn’t see anything it was all discussions)

 

Summary

 

So in summary the top 5 topics / discussions / sessions that I found most interesting

5. Visual Studio vNext  …

4. TypeScript

3. Roslyn

2. JIT

1. BCL

 

Sorry I could not expand more on certain things (like 1 above ), NDA blah blah blah…

Know this, I am very excited about the direction of .NET.. Its had a great decade already and all signs point to an even better decade going forward!

Feels like MS are doubling down on .NET

 

 

Jose Fajardo

Silverlight MVP

Dynamic backgrounds

update : Demo code works for Release Preview (RP)

Don’t be afraid to create crazy backgrounds for your managed metro apps. This is a quick post on how to do just that using some of the techniques I’ve been posting about.

For this post ill stay simple BUT the next post I promise to go crazy with the colors, textures, geometries and especially the animations

 

Idea

The idea is simple, you have your DirectX layer underneath your XAML layer and you render dynamic things on the Dx layer. These dynamic things for this demo are simple geometries, colors and radial gradients.

 

Demo screen shots

This is a plain white background with a radial gradient painted ontop of it using D2D (via SharpDx) and the Tiles are rendered on the XAML layer above the D2D layer.

Press on the blue tile

Press on the Red tile

Press on the Green tile

Press the Orange tile

 

Demo video

 

Demo code

UPDATED : Now works for Release Preview

Conclusion

Don’t be afraid to give your managed metro apps some crazy DirectX rendered backgrounds, think outside of the box and experiment. These are after all consumer apps that need to wow the user.

SharpDx gives us some great tools to do crazy things, I hope to show you some of these crazy things in my next post!

‘XamlUIPresenter’ , what are you ? :)

There is an interesting API in the WinRT XAML namespace that sounds damn interesting BUT no public examples of how to use it. Even the MS folks are quiet about it ..

What does “XamlUIPresenter” do?

XamlUIPresenter

The documentation explains it as such …

reference : msdn

A xaml visual tree on a D3D surface ?! Seriously that is some awesome sauce right there. I can’t begin to tell you how excited that one sentence makes me

Problem is how do you use it, and is it even working ?!

Blend 5

All Google or Bing searches for the term ‘XamlUIPresenter’ leads back to the msdn page, no examples or demos at all. There’s a conspiracy to hide this api from us, I’m sure of it !!!

Anyway by chance in my normal day to day reflecting of all things that i find interesting, i chanced upon it’s use in Blend 5 for Metro Apps .. !!!!

Let me explain how they use it ….

Blend Design Surface – Artboard

If you don’t already know Blend and Visual Studio share the same design surface rendering engine.

In the world of Expression Blend the design surface is an “DeviceViewArtboard” which is itself an “Artboard” which itself is just a xaml “Control” . Remember Blend is after all a XAML (WPF) app.

A Silverlight App in Blend is rendered on the design surface using the “SilverlightArtboard” which is an “Artboard” (note it doesn’t derive from DeviceViewArtboard)

A WPF App in Blend is rendered through a weird way which I believe is legacy, it hasn’t been re-written with the Artboard approach, if your interested use reflector to see how its done otherwise I won’t cover it here

[use reflector to see how WPF renders to the design surface artboard]

A Metro HTML app in Blend is rendered on a design surface using the “HtmlAartboard” which is “DeviceViewArtboard”

A Metro XAML app in Blend is rendered on a design surface using the “WindowsUIXamlAartboard” which is also a “DeviceViewArtboard”

Simply put the relationship looks like this for the 3 different rendering types of Silverlight apps, HTML Metro apps, XAML Metro apps.

I am only going to concentrate on the XAML Metro app side of things from this point onwards …

an Artboard’s “ImageHost”

Without getting into too much detail each “Artboard” contains an “ImageHost”, which as the name suggests is the host of an image, how that image is created is what interests me

In the case of the WindowsUIXamlArtboard the image host is a class of type “XamlImageHost”

And if you trace it through the actual instance that is assigned to the ImageHost is a class called “WindowsUIXamlImageHost” that is found in the Microsoft.Expression.WindowsXamlPlatform.dll .

I should point out that each of the different development platforms has it’s own “Platform” dll and the dll’s normally follow a common layout & resource pattern.

Everything we want to know is found in the WindowsXamlPlatform …

Now when you look at WindowsUIXamlImageHost in the WindowsXamlPlatform dll there is a presenterWrapper property.

And this PresenterWrapper class happens to sit in the same namespace…

Two very interesting things in this class ….

1. this class references “Windows.UI.Xaml”

2. this class PInvokes the “CreateXamlUIPresenter” call from Windows.UI.Xaml.dll

I think we found ourselves code that uses the XamlUIPresenter

Blend uses XamlUIPresenter ?!

As it turns out Blend, for XAML Metro apps, uses the XamlUIPresenter API in WinRT to render a visual tree on a Direct3D surface which intern is displayed in the artboard in the designer

Not 100% sure about this BUT it appears that the PresenterWrapper.RootVisual contains the xaml visual tree that will be rendered in a D3D surface

The PresentSiteWrapper wraps up all the logic to make the interop calls between managed/native for rendering surfaces handle pointers etc.

Here’s the PresentSiteWrapper interface incase your interested

So it does a bunch of native calls to pass thru the visual tree and return back the D3D surface which in turn is turned into BitmapData for rendering in the artboard.

Conclusion

This XamlUIPresenter api is damn interesting and if it does what i think it does is very very useful. Rendering a Xaml metro app in a “window” in the desktop looks possible from where I’m sitting.

Now that I know how it works and the basic plumbing it needs next step is to try to use it to render Xaml visual trees on a Direct3D surface from within a metro app. I really want to be able to take a visual tree and render to the GPU as is, then possibly print that tree ?!   A future post will explore this!

In Silverlight we can output a visual tree to the WriteableBitmap for printing and doing cool things with, could we do the same with XamlUIPresenter ?!

Maybe this api is intentionally undefined because MS is still working out the story around it. …

A mesmerizing burst of circles (Silverlight 5 & XNA)

Let’s give some love to Silverlight and in particular Silverlight 5’s 3DApi, which happens to be XNA.

I want to draw something cool on this XNA DrawingSurface BUT then also replicate it in DirectX. I’ve honestly never done a DirectX/C++ project so this will be very risky and a completely new experience for me….

This post will concentrate on the Silverlight 5 part, and the next post will be the DirectX part.

The IDEA

I want to experiment mixing UIElement’s that sit in the visual tree and sprites that sit in the XNA “DrawingSurface” . Below is a very simplified pic of how the UI will be layered…

• XAML UIElements sitting in the top layer (Retained Mode UIElements)

   

  1. As the user moves the mouse around the screen I will draw a nice ‘UserControl’ that gives us the x,y position of the mouse in a visual way.
  2. This UserControl will also have a “Dot” to represent the exact mouse location

• “DrawingSurface” Sprites  (Immediate Mode Sprites)

   

  1. A bunch of purple sprites will follow the mouse around the screen
  2. When the user clicks someone on the screen a bunch of green sprites will burst at that location
  3. The circles fade over time
  4. The circles move with random velocities, in random directions from the mouse-point

The Top Layer

What we want is a special shape that follows the cursor around as you move the mouse. And this shape needs to hold the x,y position of the mouse. Also this is all rendered in the XAML’s visual tree.

Blend ships with some awesome shapes, one of those is exactly what we need

I cannot begin to tell you how useful the shapes are in Blend, and I really hope that a lot of these blend libraries are available in WinRT-XAML apps in beta.

Silverlight and Blend are mature, WinRT isn’t and that is my main concern with WinRT. I really hope we don’t need to wait 3 more years for WinRT to reach the maturity of Silverlight 5 and Blend 4

Basically I am going to use this “Rectangular Callout”, add it to the visual tree then move it around as the cursor moves. I’m also going to add a small dot to signify the center of the mouse-point.

To animate these 2 controls (Ellipse, Callout) I am going to use a storyboard, which has some great easing rules built into it which will allow me to give it a nice eased motion.

The code that actually wires up the MouseMove and triggers the storyboard is self-contained in a class I called “CalloutCursor.cs” . I won’t go into the details of how that works, just know that it executes the storyboard, plugging in values where the mouse currently is. It also has the calculations to make sure the pointy bit of the callout is in the correct orientation.

So this is what the TOP layer looks like when all the above pieces are running … Pretty simple, and that’s the beauty of Silverlight & Blend, it’s so easy to do stuff like this (once you know your way around that is) ..

 

 

The Bottom Layer

This is where it get’s interesting … We are going to use the XNA bits in Silverlight 5 to draw a burst of circles where the current mouse position is.

First step is to place the XNA surface in the XAML where we will render our sprites.

Notice that we wired up the “Draw” event of the DrawingSurface. This triggers 60 times a second and it’s during these events that we draw the sprites on the surface.

For those that haven’t written much XNA code before there is this concept of a “scene”, we wrap the XNA animation inside of this scene. I have created a scene class that wraps all the logic of rendering the sprites when the mouse moves..

 

The actual SceneBurst class is here : Scene.Burst.cs

In the scene there is this concept of a sprite, and in my case I created a sprite called “BurstingCircles”, and as the name suggests it wraps up all the logic to draw the sprites on the surface.

I create 2 instances of these “BurstingCircles” sprites, one follows the mouse around and the other appears where the mouse is clicked

And these sprites are actually drawn in the “DRAW” method..

 

Now the actual “BurstingCircles” sprites code is here if your interested :

Sprite.BurstingCircles.cs

The BurstingCircles sprite is made up of 100 circles that randomly spray in 360 degree directions from a central point. These 100 circles appear one after the other, not all in one go.

Each circle is made up of 2 triangle primitives which is made up of 6 vertexes (each triangle is made up of 3 vertex).

Notice that I use a VertexPositionTexture to represent each vertex, the operative word here is “texture”. We are going to use a texture to draw on each triangle.

The texture that we are going to use is dynamically created. This is pretty cool … Silverlights WriteableBitmap lets us take a snap of a visual element and create a bitmap out of it, it is this bitmap that we are going to use as the texture

 

The texture I dynamically create is based on an ellipse and i create it with a dynamically defined colour. You can do some damn interesting things when we mix the power of Silverlight’’s mature framework and the XNA immediate mode graphics pipeline.

The draw routine is pretty straight forward, generate the 100 circles over time and re-calculate the velocity information during each cycle. This is pretty standard when dealing with pipeline graphics rendering … It’s really low level, to the metal … love it

I should briefly mention that we use simple (not complex) pixel & vertex shader’s. There’s nothing special about them, their purpose is to get pixels onto the surface and draw non-complex vertexes of the triangles.. No morphing of complex pixel effects for us yet !!!

 

So this is what the bottom layer looks like, it’s pretty simple once you get the hang of how the XNA pipeline works and how to draw in this pipeline..

 

The Install Experience

The 3DAPI (XNA) bits require GPU and Elevated Trust. So getting the user to give you these permissions is tricky.

I’ve gone with some simple graphics and I won’t go into how I did this as it’s pretty common knowledge how to wire up these setup/install screens, if you really want to see code just download the sample

This is what the user sees to ask for their permission to run the GPU demo and to install the app as an “out of browser” app. I chose to make this OOB because it’s easier to give this elevated trust than keep it in browser and getting the user to go into the dialogs and give manual permission to the Graphics card.

These are the Silverlight standard dialogs explaining that we want “elevated trust” for our app …

This is what the APP looks like in browser once it is installed ..

This is what the APP looks like when it is running Out Of Browser, having been manually installed by the user.

 

 

The Result

Here is what it looks like when everything is pulled together

 

Or try out the demo, you need Silverlight 5 to run it

 

 

The Silverlight 5 XNA Api’s are damn awesome, the CPU hit on this is less than 5% and memory footprint is small. My mind is exploding with ideas around 3D animations to compliment Visual Tree UI elements.

I really hope that every developer out there that has invested time to learn Silverlight/WPF and/or XAML, takes the time to learn XNA and/or graphics pipeline immediate mode programming. It seriously opens up your mind in a whole new direction

The next step is to reproduce this in DirectX-WinRT .. off to do just that  … stay tuned!!!

A shimmering wall of sequin’s to compare WinRT XAML & Silverlight 5

Let’s get a bit creative this week.

I have this vision in my head of a wall of glittering sequin’s, you know what a sequin is right?! like what was big in the ‘disco’ era, and still is big today ?!..

For this post I want to start out simple and create a basic shimmering wall of sequins , nothing too complex!

My ulterior motive for doing this is to compare , what I’m guessing will be, GPU/CPU intensive animations between Silverlight 5 & WinRT XAML.

SILVERLIGHT 5 Approach

Let’s first do this in Silverlight …

STEP 1 : create a ‘sequin’ control.

Starting with Blend I visually drag a couple of ellipses and a rectangle for the background. And to add interaction there’s a “Storyboard”

There are basically 3 UI elements in the visual tree for an individual sequin. The storyboard gives the sequin it’s glitter effect.

NOTE : It’s important to point out that this process was a 100% visual task. With a “designer” hat on I would tweak gradients, pixel position vectors, add new visual elements as I saw fit. If I were in a different mood I may have made 6 UIElements, or maybe 12 , it all depends on my mood and how detailed I wanted to go. I’ll come back to this point later !!! ….

Step 2 : Create a wall of sequin’s

Taking the sequin control from above I layout hundreds of these elements to form a wall. To this was simple, I created new control “scr_Board” and used the “WrapPanel” layout control to wrap hundreds of these ‘sequin’ controls. I did the creation of the sequin’s in code and it’s not clean code, this is a demo after all  

I did say that the code was not very pretty right .. Yes that is me calling into the sequin control from the board control setting & starting the storyboard animations for the sequin.. … I don’t recommended you do this in your projects, i’ve done it to make a point that I will come back to later in this post!!

So I’m creating 2584 sequin instances and loading those in the WrapPanel then starting the storyboard animation to initiate the glitter like effect for each sequin.

Also in the code you see me setting storyboard parameters with random values, that gives the random glitter effect..

Below is a quick video clip of the Silverlight 5 demo running.

 

Step 3 : Performance Tune the xaml

The hardest part of building solutions is tuning it for performance. And for something that is visually rich and uses a lot of animations you NEED to do A LOT of tuning.

There are 2514 sequin’s controls that are all animating individually. And this is a very simple demo. This is how this non-optimized solution performs. That’s around 74% CPU , 115MB Memory Consumed

Now let’s start playing with CacheMode, dictating to the GPU what surfaces to combine etc. So setting it at the root of the sequin visual tree, this is the performance improvement we get… That’s around 51% CPU , 156MB Memory Consumed

Because the visual tree for a sequin is very simple, 4 elements in all, I’m going to go ahead and set CacheMode on each and show you the results..

I normally wouldn’t’ go through every permutation of visual element and set the CacheMode on them…

The process I take is go through the visual tree and work out what makes sense to combine as a surface on the GPU and set the CacheMode on those. It may require me to tweak the visual tree by moving elements around and/or removing non-necessary ones. Also bare in mind if particular visual elements are involved in animations and are often changed then they probably don’t qualify to be cached.

This goes back to what I said earlier around how the UI was created by a designer like person using a visual tool like cider or blend. It’s easy to create very deep visual trees BUT as we can see above if we want a very performant application we need to take care with the design of the visual tree, OR spend time refactoring it before deploy.

So the best we can get is around 48% CPU with 160Mb MEM footprint. I won’t argue with you that 48% is terrible …. There’s more we can do to bring that down especially with how we animate and call storyboards, or our actual design of the storyboards.. The ultimate solution would be to go with “immediate mode” rendering using the XNA API … I will definitely do this in a future POST!!!

 

WinRT XAML Approach

Let’s now take the Silverlight app and port it to WinRT XAML …

STEP 1 : create a ‘sequin’ control.

Taking the SL5 seqin control to WinRT I discover that there was no “RadialGradientBrush”.

I tried creating my own “RadialGradientBrush”, extending the ‘GradientBrush’, BUT I kept getting XAMLTypeInfo COM exception errors when I tried referencing my custom class in xaml …

I believe the issue is related to this reported bug by Andy Beaulieu – “XamlTypeInfo.g.cs Generation Error”

In the end I had to settle for a “LinearGradientBrush”, ill revisit this when Beta arrives .

Step 2 : create a wall of sequins

There is no WrapPanel in WinRT so I took a Silverlight one and directly ported it over. Worked first go, nice and easy. I found the code on CodeProject .

Another issue I found was that ‘x:name=[name]’ elements in a control were no longer accessible from a parent control because the logic around ‘Protection levels’ has changed. eg. My sequin controls that had Storyboards and DoubleKeyAnimations defined could no longer be set/called from the parent. This is a great thing in my opinion

 

 

Another issue that arose was around DependencyProperties.Register() and it takes strings rather than types. This has been fixed and hopefully we’ll get these changes in beta very soon! (below is a screen shot of the issue I just mentioned above around DependencyProperty)

So here ‘s a quick video of the SL5 app converted to WinRT XAML with the few changes mentioned above.

What you’ll notice is that there appears to be a long pause on the black screen after the splash screen loads, that’s when the 2584 sequins are being dynamically created, initialized and added to the WrapPanel. I need to investigate this, as I mentioned this was just a simple port over from SL5 to WinRT XAML.

Also what’s not clear from the video is how buttery smooth the xaml metro app runs as you move between other metro apps and desktop. It is infinitely smoother than the Silverlight app running with other desktop apps, I can definitely say that the GPU acceleration of metro style apps is having a positive impact on performance

 

Another annoying issue that popped up is whenever I closed the app and killed it manually, there would always be an orphaned process created. There are so many of these weird issues popping up in this developer preview of Win8, and as a developer you will see a serious amount of these!

 

Another issue that popped up is that sometimes the app process would stay in the “Background Processes” section of the Task Manager and sometimes it would correctly appear in the “Applications” section.

 

Step 3 : Performance tuning

WinRT XAML also has CacheMode, you can set UIElement’s to be “HardwareBitmapCached” or “SoftwareBitmapCached”

Without any tweaking the CPU usage is at around 45% and the Memory around 130MB.

With tweaking I can get the CPU down to 30-35% and Memory to around 105MB

I know that that’s still a lot of % CPU , and I doubt the Windows Store would let any app that behaved as such BUT in my eyes that is brilliant that it can get to 30 in the first place. There is a lot of CPU draining code in there, and as I mentioned previously this type of animation is screaming to be done using a retained mode solution, XNA/DirectX …. Hopefully we’ll get that in Beta

What is a worry is that when the metro app is pushed to the background, it’s still running & consuming resources excessively. It appears that I the APP maker would need to detect this move to the background and carry out my own code to stop my app . It makes sense that I would need to do this HOWEVER a very small part of me would have wished that maybe MS could have added performance tuning smarts around storyboards and stopped running ones when a metro app goes into the background .  That’s why I chose to put all animations in storyboards because technically they lend themselves to being better tooled, tweaked, analyzed & orchestrated etc. by the CLR and or the OS . I hopped that the platform could do smart things to them at the appropriate time, BUT I thought wrong! (picture below is the metro glittering sequins demo app running in background for over 15 minutes)

Another very interesting issue that came up with WinRT compared to Silverlight is that animations seemed to run so much faster in WinRT. I had to slow things down just to get comparable glittering

 

Conclusion:

You can definitely achieve great results with Silverlight 5 if you take care with your visual tree and know how to optimize and use the provided tooling to debug/trace  performance issues.

BUT WinRT definitely is showing signs of being an amazing GPU Accelerated framework that let’s you achieve levels of performance greater than anything Silverlight can offer today. And that’s not to say that Silverlight is bad, it’s all about using the right technology for the job.

If I were to build a client solution  I would do this using an immediate mode approach, XNA or DirectX. Hopefully I’ll do just that in a future post

 

 

Let’s end with the glittering sequins again .. this is it again in WinRT ( I should point out that the UX definitely suffers because it’s using a LinearGradientBrush instead of a Radial one, yes those things make a huge difference . And it’s so much smoother when running as the video I took dropped frames hence the glittering is very jittery )

 

From now on all my future post’s will have an element of creativity in them, I have to get back to my roots

 

[UPDATED – 22nd January 2012]

As some of you have rightly pointed out, the code changed in the Win8 WinRT XAML version for the sequin, i.e. using a “LinearGradientBrush” instead of a “RadialGradientBrush”, will have an impact on performance in the Silverlight version. This is definitely true and i have run a simple test to see what difference this makes …. The improvement was around 2-4% reduction in CPU BUT the MEMORY pretty much stayed the same.

When I removed a whole “Ellipse” from the visual tree this reduced the MEMORY footprint by around 30-40MB .

Where Windows 8 WinRT-XAML definitely out performs sis when you are moving between apps and windows, it’s seriously buttery smooth.

All eyes are now on Windows 8 Beta

Looking at Silverlight adoption statistics (for fun)

These stats are purely for fun, digest these figures with a huge serving of salt! . 

All these stats come from RIASTAT’s and I’ve pulled them from other people’s posts. There are other statistic collection sites that I also like to use, like StatOwl.

The stats collected are from ALL INTERNET CONNECTED DEVICES, even if Silverlight doesn’t work on that device e.g. Android, iOS etc. It basically sums up ALL devices that connect to the internet and detects if Silverlight is installed. It just so happens that the majority of internet connected devices are Windows OS’s hence the large Silverlight/Flash adoption.

As mobile devices increase I would expect the Silverlight and Flash stats to diminish, thou we aren’t seeing that yet. Which could mean that even thou mobile devices are increasing in adoption, so are PC’s and MAC’s.

 

NOV 2010

reference: Post : Kelly White

Silverlight 2+3+4 sits around 54%

MAY 2011

reference: Post : Code Project

Silverlight 2+3+4 sits around 72%

JAN 2012

reference: RIASTATS January 2012

Silverlight 2+3+4 sits around 76%

Now if you look at just Windows 7 machines you see a bigger penetration of Silverlight.

Silverlight 2+3+4 sits around 86%

A huge percentage of Windows 7 devices have Silverlight, that’s is brilliant!!

And what’s even more exciting to see, the latest version of Silverlight 4 (85.4%) has a greater adoption than the latest version of Flash 11 (72.1%). Bare in mind Silverlight 5 only came out <1 month ago.

And with major movie studios demanding Silverlight to stream their content (eg. Netflix/LoveFilm in the UK require Silverlight) I do believe that Silverlight adoption can only go up (at least on the Windows & MacOS ecosystems that is)

Anyway as mentioned above these stats are just for fun, it shows that Silverlight adoption is still trending up  (NOT DOWN) and even if MS aren’t spending billions for Olympics streaming rights it’s still holding it’s own

Go Silverlight !!!!  

Silverlight + Kinect = Apps of tomorrow

If you know Silverlight then you need to get a Kinect and build Kinect enhanced Silverlight apps. Having spent the last 2 months doing this I can honestly say it’s changed the way I look at UI’s and UX’s!

Being able to interact with your app using only gestures changes everything, I always knew Kinect was amazing BUT once I started building Silverlight apps with only these gestures as input did I truly realize how life changing NUI was going to be.

I so dearly want to share the experience I’ve had with Kinect in Silverlight/WPF with all of you!

If your willing to listen I will walk you through how to get Kinect gestures into your Silverlight apps. You really need to start experiencing what it’s like to interact with your apps without a keyboard/mouse!

This is our goal:

1. Create a Kinect enabled Silverlight app.

This is a video demonstration of what we’re going to build:

This is what you will need:

1. Silverlight experience – your on your own here
2. Kinect – you will need to purchase this
3. Kinect drivers (uses OpenNI) – this will be provided for you
4. Socket service – we will provide this for you
5. WPF experience – not really required as all the pieces will be provided for you BUT it’s good to know incase you want to extend what Kinect gestures you want to support.

Lets begin ……..

Download all the bits

http://silverlightkinect.codeplex.com/releases

Installing the drivers

1. Make sure your Kinect is disconnected while you install these drivers.
2. You may also need to un-install any existing Kinect drivers you have installed in your PC. The drivers that come with this install are a certain version that the WPF wrapper needs. The source code for the WPF wrapper is included incase your adventurous enough to want to compile it to your own custom drivers.

• Step 1 in the downloaded bits is where all the drivers are installed, make sure you follow the install instructions.
  

  When it requests for the license key use the one provided by Primesense : 0KOIk2JeIBYClPWVnMoRKn5cdY4=

  After everything is installed you may need to use these config files to setup the kinect cameras :
  http://cid-1e3f9e1e2f8bc994.office.live.com/embedicon.aspx/Public/KinectConfigFiles.zip
  

• Running the Socket Service – run it from the VS project, this at least guarantees all your references are intact.
  

• Running the Silverlight demo app (this needs the socket service running from step 3)
  

• Running the WPF Kinect app (this needs the socket service running from step 3)
  

Assuming all goes well you should have a Silverlight app that can listen to Kinect gestures from WPF via a Socket Service.

Over the next few days & weeks I will show you some really cool Kinect-Silverlight experiences. And what makes me the most excited is that we can now truly see the power of Silverlight, and that is it’s ability to quickly innovate & iterate your ideas & designs.

HTML5 will always be 2 steps behind Silverlight and for most people thats ok, BUT for me all I really care about are the apps & experiences of tomorrow. Hello Silverlight,  Kinect & 3D

Feel free to tweet me any questions if you have problems with the sample : @josefajardo . Or if you have messenger and want to chat through your problems reach me at  fajardo_jf@hotmail.com

update 1 : If you are having problems with an error message that sounds simlar to this “Can’t create any node of the requested type” it’s worth trying these config files. Make sure you place them in the appropriate folders.

http://cid-1e3f9e1e2f8bc994.office.live.com/embedicon.aspx/Public/KinectConfigFiles.zip

====== Important Credits ======

etihwddot :

I need to do a shout out to this guy who did alot of the hard work of getting Kinect drivers compiled to a nice dotnet consumable framework. I used alot of his code