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


image

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 Smile

SharpDx lets us create RadialGradientBrush for using as a fill

image

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

image

 

Here is the result of the Radial Gradient rendered…

image

 

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

image

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.

 image

 

 

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

image

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!

image

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

image

 

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

 

image

 

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 Winking smile 

Share your awesome experiences people !!!

8 responses to “Radial gradients + Mini-path geometry sprites + infinite-scrolling inertial canvas = :)

  1. Pingback: Radial gradients + Mini-path geometry sprites + infinite-scrolling inertial canvas = :) | Silverlight and other cool things …

  2. Pingback: Radial gradients + Mini-path geometry sprites + infinite-scrolling inertial canvas = :) :: Learning

  3. Pingback: Windows 8 Developer Links – 2012-05-21 | Dan Rigby

  4. Ummm, I code for Windows 8 and enjoying it. :)

  5. I have used DirectX for some basic Texture sprites drawing,
    i was wondering if you have some example of how to apply Effect to tint te texture using this function from the SharpdX.

    public void DrawImage(Effect effect, DrawingPointF targetOffset, InterpolationMode interpolationMode = InterpolationMode.Linear, CompositeMode compositeMode = CompositeMode.SourceOver);

  6. Pingback: All my XAML/C#/SharpDx demos | Silverlight and other cool things …

  7. Question: How can I save what’s in d2dContext as image? In my case, I’m drawing a bunch of Lines on screen using d2dContext.DrawLine. I want to be able to take that and save it to local machine. I can’t seem to find any way of doing that.

    Thanks!

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