Radial gradients + Mini-path geometry sprites + infinite-scrolling inertial canvas = :)

I’m slowly building up some very cool controls and general learning’s around XAML & SharpDx and I want to share 3 of them with you today..

 

Radial Gradients in XAML

So I’ve said it a couple of times before, WinRT XAML does not have support for RadialGradientBrush, and the Brush class itself is sealed so you can’t even extend it to create your own.

SharpDx to the rescue

SharpDx lets us create RadialGradientBrush for using as a fill

I use that radial gradient as a fill for a rectangle that is rendered on a Direct2D surface in my demo app

 

Here is the result of the Radial Gradient rendered…

 

Mini-Path-Language sprites on Direct2D

I created a simple converter that turns mini path language to Direct2D PathGeometries. It’s not perfect and is based off the open-source library for a Silverlight one “Silverlight string to path geometry”.

I used Blend to create the path asset

Took the “DATA” for the asset (mini-path-language describes the data structure) and converted it to PathGeometries which I used as sprites for rendering on a Direct2D surface.

 

 

 

Infinitely scrolling inertial layer

I created a simple control called an “Inertial Layer” that has sensitivity properties on how sensitive it moves in the X,Y directions. Also these layers are wired up to a “Conductor” control that listens to “ManipulationDelta” data from sensor(touch) events and broadcasts these to the “inertial” layers.

I have 2 new controls “InertialLayer” and “Conductor” that wraps up the functionality needed for infinite inertial scrolling

I have 4 Inertial Layers in XAML and each layer for simplicity sake has a rectangle in it, each layer can actually contain any XAML or DirectX element!

The Conductor is initialized in code and when it starts it pushes data to the InertialLayers ]

 

Video Demos

Here is a video taken from my HTC Titan, excuse the hand movements. I wanted to try to show the smoothness of the animations when encoder isn’t interfering with it.

 

Here is a video taken with Encoder

 

 

Code

 

 

Problems

The “ManipulationDelta” were being negatively impacted by the Direct2D surface high frame-rate rendering. I had to reduce the D2D Surface to 30fps to compensate. I raised the issue here

 

Conclusion

I’m slowly getting the hang of DirectX (via SharpDx) as well as working out how best to combine XAML and DirectX. It’s the combination of these two UI technologies that will create those amazing UI/UX’s that we see in movies.

I have some other very very cool controls and ideas that I’ll show you over time, I’m just slowly working out the kinks in all of them..

Please share your experiences with WinRT, XAML & DirectX. There’s not enough of you guys/gals posting … are you all under NDA and working on super cool secret things ? Hey I am BUT I’m still blogging  

Share your awesome experiences people !!!