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!

‘XamlUIPresenter’ , what are you ? :)


image

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 …

image

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 Smile

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

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.

image

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.

image

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)

image

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”

image

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

image

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

image

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 Smile

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

image

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 .

image

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.

image

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.

image

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

image

Two very interesting things in this class ….

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

image

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

image

I think we found ourselves code that uses the XamlUIPresenter Smile

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

image

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

image

Here’s the PresentSiteWrapper interface incase your interested

image

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 ?! Smile  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. …

Smile

A ‘Paper’ like “2-Page” Close Animation


image

If you follow me on Twitter you’ll know that I love the iPad app ‘Paper’ . And what’s crazy cool about this app is that it was built by ex-Microsoft people that were working on the Courier project Smile

The company is called 53, and the app can be found in iTunes here .

This app has some really awesomely executed animations and it’s these that I want to try to reproduce in a Metro app.

I’ll try to keep the animations as simple as possible BUT I expect that in the end I may need to resort to DirectX 3D. Also I plan on taking several posts to complete this, as I will be experimenting with a lot of techniques..

Here’s a video of the animations that I hope to reproduce over the course of several posts..

 

“2 pages” to “Closed” view

So this first post will be an attempt to emulate the “2 pages” view to “closed” view. Please excuse the poorly drawn sketch …

image

Right Page

A simple rectangle half the width of the screen aligned to the right. I gave it an off white fill color just so that it can be distinguished from the left side.

image

Left Page

A simple rectangle half the width of the screen aligned to the left

image

 

Slider to emulate 2 finger gesture

Because I wanted to make this as simple as possible I am not going to try to get the 2 finger gesture working right now, in it’s place I’ll have a slider that does pretty much what the 2 finger pinch does .

For the slider I will have it slide 1 to 100 in steps of 1.

image

The reason we can use a slider to emulate the pinch, is because all we are concerned about with the pinch gesture is the distance between the 2 fingers (index and thumb) over time. So a slider ‘value’ over a min (0) and max (100) will suffice!

image

 

Animation to “Close” the 2 pages like a book

This is the fun bit, we need to animate the 2 pages in a way that looks like a book closing. I can think of several ways to do this BUT for now the simplest is to use a couple of “Transforms” to fake this 3D effect.

I created a storyboard called “sbClosePages” and arbitrarily am going to animate the page close over 2 seconds. It doesn’t matter how long you choose because in the end it will be the slider, or rather the pinch gesture, that will determine the duration of the close.

Lets start with the RIGHT PAGE :

image

What you’ll notice is that to get a nice page close effect you can use a combination of RenderTransform (scale, translate) and Projection (RotationY). I achieved this by simply trial and error in blend, sliding figures around to achieve the desired interaction.

image

image

image

image

The LEFT PAGE is exactly the same BUT the values for the transforms may be opposite as the pages are moving in opposite directions. It really is all about trial and error and visually experiencing the interaction. Blend is awesome for things like this, trying to do this in code or via numbers (no visual) would be very very difficult!

I’m not going to include every snapshot of the left page BUT if you want just look at the demo code to see the actual figures and screens.

image

What you’ll notice is that for the left page I needed to set the projections ‘CenterOfOrigin’ to achieve my desired effect, this again was a trial and error thing that would be near impossible to do if it wasn’t visual. Blend makes some things so simple that would normally be virtually impossible!

And the reason I needed to set the CenterOfOrigin is because I needed the right side of the ‘LeftPage’ to be the one that stays stationary during the animation.

Hooking up the slider to the storyboard

The last step is to run the storyboard in response to a gesture, in our case it is a slider that mimics a pinch.

First step is to wire up the sliders ValueChanged event.

image

image

Basically as we slide we want to set the storyboard to something between 0 and 2 seconds. Remember that the 2 seconds is the duration of the animation we defined above. The slider can move between 0 and 100, so if it moves to 50% then we want the storyboard to move 50% as well, which is 50% of 2 seconds = 1 second.

So the last step is to set the storyboard to the calculated value, and to do that we can use a very cool property on a storyboard called “Seek” . How seek works is it expects the storyboard to already be running, and when we set the seek it will go to that point in the storyboard Smile

So lets kick start the storyboard on the init of the page, note that if we let it run it will just execute the storyboard so we should also pause it immediately!

image

So now when the slider changes we can “Seek” a particular time on the storyboard Smile

image

And so when you run the app and slide the slider this is what you get Smile

 

Sample Code

 

image

 

Conclusion

 

I plan on creating a bunch of posts to replicate a lot of the ‘Paper’ app animations so stay tuned for those. But as you can see it is easy to achieve some of those effects with simple transforms BUT done visually.

Catch you guys around!