WinRT/XAML Colour Picker (using SharpDx)


image

I needed a colour picker for an app I’m building and it turns out no ones built a WinRT XAML one yet.

So this is my very simple colour picker!

I use bitmaps to represent the swatch (in my case i have 3 different types).

I use SharpDx to get the “Pixel Buffer” of the selected swatch

Where ever the mouse or pointer is i get the pixel under that position via the pixel buffer and from that i get the colours (RGBA)

This is what the colour picker looks like

image

 

This is a quick video of the colour picker :

 

Here’s the code

image

9 new XAML/SharpDx demos


image

[UPDATED : Demo code now works for FINAL RTM version of Windows 8 (9200) ]

I’m becoming more experienced with WinRT XAML and DirectX via SharpDx, and as such my demos are becoming more complex. This is all a learning process for me and the code reflects that. I hope you find something useful in the samples.

Here’s a quick video of the 9 new samples, I apologize upfront for the shaky camera work. If I try to screen capture on my tablet the CPU utilization negatively impacts the performance of the running app.. So I’m stuck with a hand held camera for now Sad smile

2000 bursting stars

– Rudimentary Sprite Batch – optimized and rendering 2000-4000+ sprites (stars) with some complex motion for each sprite. I easily got this painting up to 5000 sprites and with good frame rate. That’s simultaneously running sprites, you can create some pretty cool UX with that many independent sprites Smile

image

Icon Burst

– Sprite Batch + Sprite Sheet – This demo introduces the concept of a sprite sheet, a single sheet containing all your sprites that you cut up and draw on a surface. I wont go into the tool to create the sprite sheet, which is a work in progress, but the demo shows how to take that sprite sheet, push it to the GPU as a single texture and then render a clipped region of that texture via the sprite batch

image

Icon wall

– this takes the demo 2 above and renders a wall of icons . Very simple, I plan on doing more with this demo in the future.

image

Firework

– using SharpDx to get to Direct3D and Media Foundation this is taking the IE10 firework demo and doing it in XAML and DirectX. The result surprised me because it performed much better than the IE10 demo itself. I know its very rudimentary BUT it still does quite a lot of what the browser version does. Browser version was very choppy and was getting into the 20%+ CPU utilization, almost unplayable in some cases. The SharpDx/DirectX/XAML/Media Foundation version was very smooth!

image

Drop shadow Effect

– a simple Direct2D effect graph to draw a drop shadow on an image

image

Tilt-shift like Effect

– using only direct 2D supplied effects, several graphed effects to produce a tilt-shift like effect. Just shows that the supplied basic effects in Direct 2D when graphed can achieve some very complex effects, no need to create your own custom effect Smile

image

Tile Dashboard Editor

– A simple tile layout editor, I plan to use this to help layout my home screen tiles. Close to 80% of the apps in the win 8 app store use some form of tiled home screen, this tile editor will hopefully one day make creating these home pages very simple. The goal is to create a Windows Phone 8 like home screen layout of tiles.

image

3-Axis Grid

– this is a very basic introduction to the x,y,z axis in Direct3D and using matrix transforms to move the planes around. It also introduces the concept of Line-List to draw the lines, as opposed to the triangles I’ve been using to date.

image

Radial Control

– This is a very simple version of the OneNote Radial dial, the purpose is to introduce the concept of a curved menu and to show that drawing arcs in XAML is easy even without the Drawing.Shapes library that we are accustomed to from Blend Silverlight . This is all XAML and is very fluid. I plan to iterate this control many times, and hopefully one day it becomes a control I’d be happy to use in an app.

image

Demo Code

[please note that this will be updated when I have time to, I am quite busy and this is a side project. ]

image

image

Conclusion

Again please remember that these demo’s are the result of me learning these new technologies, they are very rough and I would expect you to re-architect them if you were to use it in your app.

I’m loving this new WinRT XAML SharpDx world and its pretty clear to me that MS are headed in the right direction with Windows 8.

I look forward to seeing what you build with this new application developer stack Smile

All my XAML/C#/SharpDx demos


image

As promised here is all my samples in one huge project, and working on Windows 8 Release Preview (RP).

It is only demo code and I follow a very loose way of programming, which means I pay more attention to getting things done creatively than in frameworks and coding styles.

Quick 4 min video of the demos

[note that the frame-rate of the running app is slow because I am screen recording simultaneously]


List of the demos

Alpha Pad – shows a quick and nicely animated alpha keypad using tilt tiles and the tile wall

image

Numeric Pad – a numeric keypad built using tilt tiles and a tilt wall with nice fluid animations in.

image

Dynamic Backgrounds – as mentioned in a previous blog post, this demo shows how to use SharpDx and Direct2D to create dynamic backgrounds for your app

image

Animated Gifs – using SharpDx to get to the WIC and D2D libraries we can go above and beyond what Silverlight/XNA could ever offer and build our own media experiences . In this case implement the animated gif in xaml ourselves. A previous blog post covered this demo..

image

Composite Modes – shows you how to implement different composite modes for when you try composing textures on a Direct2D surface. The ideas also translate to how you would compose on a D3D surface.

image

Interpolation Modes – shows you how to implement different interpolation modes for your D2D drawn textured effects.

image

Lighting Effects – using D2D and build in effects  to show how to create cool lighting effects. This previous post covers this demo .

image

Ripple + Pixelated custom effects – again using D2D and effect graphs we show how to create custom effects (ripple/pixelated) and graph them together to create cool effects. A previous post covers this demo.

image

Ribbon – playing around with the idea of a metro ribbon and how it would feel like using it. This previous post covers this demo …

image

Data Entry – experimenting with creating my data entry forms using a quick metadata driven approach, using reflection. The reason for this is that configuring D2D Effects of D3D settings for your scene would take a lot of xaml configuration screens, I was hoping for a very quick meta-data driven approach to creating these screens.

image

image

Inertial Dots – introducing the conductor and inertial controls. 2 new controls that I hope to leverage a lot in future UI/UX’s as they deliver some cool animated effects . I talked about this demo in a previous post.

image

Cube – a 3D cube rendered using SharpDx via Direct3D

image

Cube Wall – playing around with rendering 300+ textured cubes using an imagebrush

image

Tile Texture – I want to experiment with creating cool metro tiles, this demo is the precursor to that. The idea was to create a simple tile on a Dx surface that I will later play around with

image

Tile Wall – just like the “Tile Texture” demo , this is a wall of tiles that I hope to use in the future to experiment with a wall of metro tiles.

image

Bursting Circles 1 & 2 – A batch of circles that are being batch rendered on a Dx surface via D3D and SharpDx. These 2 demos are purely experiments on ideas I have for building out my own Sprite Batch, this is teaching me about things like caching on the GPU, Vertex/Pixel shader constants, the right types of lists to use for best performance, type of blending to use  etc. Lost of learning is going on with these 2 demos ..

image

image

Demo Code

[please note that this will be updated when I have time to, I am quite busy and this is a side project. ]

image

Conclusion

I’m having a lot of fun coding on top of WinRT XAML using SharpDx and C#. [again a big thank you to Alexandre Mutel who owns the SharpDx project Smile ]

It’s all about using the technologies that you find most rewarding, and for me that is XAML (Silverlight, WPF, XAML) and DirectX …

It’s clear to me that mixing XAML and DirectX is how we are going to deliver those amazing UI/UX’s that we see in movies, and they may not make sense in business apps today BUT I honestly believe in x years time we wont’ be having this argument..

Get the experience under your belt today with 2D, 3D, XAML, you won’t regret it in the future!

And in respect to HTML, I seriously can’t see web technologies delivering us  the amazing UI/UX’s that we see in movies, and that’s all I want to be doing! So power to all you web programmers out there, but for me XAML and DirectX all the way!

Dynamic backgrounds


image

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 Smile

 

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.

image

 

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.

image

Press on the blue tile

image

Press on the Red tile

image

Press on the Green tile

image

Press the Orange tile

image

 

Demo video

 

Demo code

image

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!

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

Animated gifs in XAML/C# :)


image

Someone the other day tweeted a link to some very cool animated gifs. I love animated gifs Smile !!

I have always wanted animated gifs in Silverlight/WPF BUT for reasons unknown they never came. They would have been perfect for A LOT of scenarios where creating storyboard animations would have been overkill.

Well turns out WinRT XAML, firmly rooted in Silverlight XAML, also doesn’t have GIF support nor will it probably ever get it. BUT it does have WinRT support and it has access to DirectX & WIC via SharpDx!!

And today on Twitter Jeremiah Morrill tweeted that WIC has support for GIF’s, this intrigued me. Can I build my own support for animated gifs in XAML using DirectX & WIC (via SharpDx) ?!

Challenge is on ……

This is the animated gif I will try to render…

Source : “Savannah Rain” (frommetoyou)

Default XAML/C# metro app project + SharpDx

I created an empty managed metro project and added the necessary SharpDx bits, basically like I have been over the last several posts.

As always this project has a effect renderer that will render to a (Direct2D or Direct3D) surface via a (SwapChainBackgroundPanel or SurfaceImageSource). Again this is what I’ve been doing in all my SharpDx posts to date so just go back to those or the samples if you’ve forgotten Smile

image

 

Animated GIF resource

Now just add the Animated GIF as a content resource to the project. I could load it in via a URI BUT I thought it would be easier to just include it for now .

image

 

Load GIF via WIC

Ok this is where it gets interesting, SharpDx gives us access to WIC from C#. Question is does it have the GIF bits.

As I’ve said many times before SharpDx is a very thin/performant wrapper over C++ libraries (but just to clarify there will always be an overhead to using WIC via this wrapper even thou it is small). This wrapper is a metadata mapping generated api so technically the GIF bits of WIC should have come across. Lets test it out.

Lets instantiate a WIC GIFDecoder that will be used to read the animated GIF resource. The “asset” is simple the internal uri to the gif content.

image

Next when we animate this gif we need to know how many frames to animate. The GIF spec defines this…

image

Now for each frame we want to get the bitmap of that layer and store it for rendering. There is a lot going on in this code BUT in a nutshell an object is created that lets us get at the bytes of data for a particular frame in the gif. (its easy to follow just step through the code , that’s how I learnt

image

As it turns out for GIFS the first layer normally has the entire bitmap contents of the GIF and all the other frames above that contain delta information.. Also the ‘delta’ frames are all offseted so we need to get the offset (left,top) of those frames and store them for rendering of that frame later on..

image

 

So assuming that SharpDx’s GIF WIC works fine that’s basically all we need information wise.. We just need a way to store those frames and render them to the UI.

…. hello SpriteBatch Smile

SpriteBatch

The best way to render a series of textures in the graphics world is via a spritebatch. Lets create a very very dirty one that will serve our purposes ..

I’m not going to go into too much detail of how this dirty spritebatch works, it’s not in the truest sense a spritebatch BUT it will do for now..

image

This spritebatch will keep a cache of the GIFs frames that I will render on a DirectX Surface. I’ve defined 2 lists to store the static frames ( 0 ) and the rotating frames ( 1 – 7 )

image

I’ve created a way to add sprites (frames) to my spritebatch via the methods

1. DrawAlways  – sprites that will always get rendered on each loop of the rendering pipeline eg. frame 0 of the aimated gif

2. DrawRotating – sprites that will rotate there appearance with each loop of the rendering pipeline eg. frames 1 to 7 of the animated gif

image

 

These methods are called when we are decoding our GIF (the section prior to this outlined this process)

image

The sprite batch, as expected, has the ability to render itself and all it’s sprites. In my example it will render on a D2D surface and will use the much loved BitmapEffect to render the layer Smile .

Also note that the offset(_texturesRotatedOffset) for the layer needs to be rendered for the 1-7 frames

image

Now if you don’t understand the above just step through the code, it will all make sense..

Does this all work ?!

Does SharpDx’s support for WIC GIF’s work for animated gifs ?!

 

Running the demo

 

Here’s some awesome gifs from a very cool site

 

Here’s the metro xaml/c# demo running one of those animated gifs. Note that the framerate is low because of the simultaneous video recording going on. Without it it runs buttery smooth at 65-70fps. Smile 

 

 

Sample code

 

image

 

Conclusion

 

I started out this experiment fully expecting it NOT to work… I was so surprised that it actually did Smile . Animated gifs in a XAML managed metro app!!! Damn!!

XAML/WinRT + DirectX/WIC (via SharpDx) is turning into a killer combination of features for building pretty amazing new experiences. I’m only now getting familiar with the frameworks, I can’t wait to see what I’ll be creating a month from now!

I’m loving XAML/DirectX …

Using FX effects in your managed metro apps


image

In the WPF and Silverlight “desktop” worlds we have the luxury of being able to use shader effects (fx) in our apps, this infrastructure is not available in the “Windows Phone” or “WinRT XAML/C#” worlds.

However thanks to SharpDx and the improved hlsl graphics features in VS11 we can now easily use these same fx effects. Let me show you how I consume fx files in my XAML/C# WinRT apps…

FX to CSO (HLSL)

Our goal is to turn the FX file into something we can use, and if you’ve followed my previous posts the best option we have in DX11.1 world is a custom shader (cso) and thanks to SharpDx we can do that Smile … So lets try to turn this fx file into a cso

Now the HLSL editor and the compile shader features in Visual Studio 11 shader works only in a DirectX/Cx project.

So first step is to create a DirectX/Cx project to host our FX files. In my case I created a Direct3D Application called “D3DFXConverter

image

image

Then copy across the fx files you want to convert into this new project, in my example I’m going to convert a “Pixelate.fx” . I took this fx file from the “wpf pixel shaders libarary” project on codeplex.

image

Now rename the “fx” extension to “hlsl”

image

We now get all the editor experience of an hlsl file for our fx file.

image

What we want to do is try to compile this as a pixelshader, so go to the compiler setting and set the “Shader Model” to “Shader Model 4 Level 9_1 (/4_0_level_9_1)” and “Shader Type” to “Pixel Shader (/ps)” . note that the fx file in WPF is a shader model 2 or 3.

image

Now if we try to compile the D2DFXConverter you’ll notice some errors

image

What these errors mean is that the hlsl code is not compliant with the shader model we’ve chosen, we need to make some minor alterations to the hlsl ..

The changes are very minor, I’ve actually converted several fx shaders and in ALL cases the following is all I needed to change

 

1. Wrap constants inside a cbuffer 

 

Before:

image

After :

image

 

2. Alter the Sampler Input

 

Before :

image

After :

image

 

3. Alter the interface of the main entry point to the shader

 

Before :

image

 

After :

image

 

4. Alter the text2D call

 

Before :

image

After :

image

 

Now if you compile the project ….

image

And if you check out the output directory for the successful build you’ll find the binary of the compiled custom shader (cso).

image

 

We’ve successfully converted our fx to a cso ready for consumption in our managed metro SharpDx app.

 

Consuming the CSO as a custom effect via SharpDx

To speed things up I’m going to reuse the D2DCustomPixelShaderEffect project I created a few posts ago, “Custom Effects – Ripple Effect (Pixel Shader)” .

Copy across the cso into the project …

image

Create a C# custom effect wrapper around the cso much like what we did in the above mentioned post for the RippleEffect. Basically I just copied the RippleEffect.cs and renamed it to PixelateEffect.cs and changed some of the internals, it was pretty obvious what needed to be changed. If you get confused just re-read the above mentioned post Smile

image

And the last step is to alter the EffectRenderer.cs to call the newly created custom effect PixelateEffect.cs .

The changes were simple, register the PixelEffect and wire up some gestures to alter the shaders 2 properties “HorizontalPixelCounts”, “VerticalPixelCounts”.

Again I won’t explain how to do that as it was covered in my earlier “custom effects” post.

image

 

Video of the demo

 

 

The frame rate is low and fluctuates quite a bit because of the video recording going on simultaneously.

 

Demo code

 

image

 

Conclusion

 

I’ve successfully converted 14 of the FX files from the WPF/SL codeplex project , the ones that weren’t so easy to convert I will cover in future posts.

SharpDx is turning into a great framework that fills a big hole in the XAML/C# stack.

As for the performance of SharpDx, the shader demo’s I’ve been doing consistently achieve frame rates in the 60+ range. It’s definitely performant  …

I look forward to seeing what others create on top of SharpDx!