DirectX in your WinRT-XAML/C# apps (SharpDx)

So you want to do some DirectX immediate mode rendering in your C#/XAML app ? Let me walk you through how to do that using the SharpDx library

Combining XAML and DirectX is an excellent msdn article that talks about what is possible with DirectX and XAML. Unfortunately there are no examples and what information there is available is targeting the XAML/C++ world. I wanted to do this for us managed programmers!

SharpDx is a very thin library that exposes the DirectX api’s for use in C# WinRT apps . It exposes the DirectX API’s nearly 1-to-1 with no higher level abstraction (like what XNA is). We will use this library to render DirectX content in our XAML/C# apps via the new controls mentioned in the above article (SurfaceImageHost & SwapChainBackgroundPanel)

Alexandre Mutel is the brilliant guy who owns SharpDx, he’s done a lot of the hard work for us BUT help is very scarce with getting these bits working on your Win8 development environment.

I’ll spend this post walking you through how to get this all setup. It’s a simple post that will set the foundation for some awesome UI/UX rich future posts!

 

Step 1 : Get SharpDx

 

I used CygWin with the GIT bits installed.

The below statement clones the source into a local WinRT003 directory.

“git clone https://code.google.com/p/sharpdx WinRT003”

  Once it finishes cloning locally this is what the structure should look like

 

Step 2 : Fix up permissions for the local cloned source

 

When the source clones locally it will be given the permission of the logged in user which is probably your live account.

The problem here is when you try to do VS related things like compiling or deploying source code it needs higher elevated permissions.

The first thing we need to fix are these files

1. “\External\gccxml\bin\gccxml.exe”

2. “\External\gccxml\bin\gccxml_cc1plus.exe”

These are EXE’s that needs “Execute” permission for your logged in account. This file is used to help create the DirectX metadata that will be used to generate the C# DirectX library, which I’ll mention in the 3rd step below.

 

Step 3 : Build SharpDx code

 

In the root folder there is a solution file (SharpDX.sln), load this up.

 

When the solution loads up it will have a build type of “Default” . We need to change this to “Win8Debug”

The SharpDX project is the default project and it has a Pre-Build event

“”$(SolutionDir)Source\Tools\SharpGen\RunGenerator.bat” $(ConfigurationName)”

SharpGen is a tool that basically generates documentation metadata for the DirectX api which will intern be used to create the thin DirectX C# wrapper

I’m not going to go into how this metadata actually works BUT I do suggest spending the couple of hours to work it our for yourself, it’s actually really cool

If all permissions are set correctly, when you build the solution the SharpGen tool will start generating the metadata, then the C# DirectX libraries will get generated from that.

 

If all goes well then all the Bins for each library should be filled with goodness .. You should have a C# consumable library of DirectX api’s !!!!

For example the picture below shows you the C# generated dll’s that give you access to the Direct3D api’s

 

So now we can call DirectX api’s via C# !!!

 

Step 4 : Using these DirectX-C# libraries to render islands of DirectX in your XAML (SurfaceImageSource)

 

Alexander has some great samples that show how to use these libraries to render DirectX content in your XAML surface via the SurfaceImageSource element.

The 2 “Rectangle” elements below are “Filled” with the SurfaceImageSource DirectX rendered content.

The d3dRectangle will load the SurfaceImageSource content generated via the Direct3D pipeline

The d2dRectangle will load the SurfaceImageSource content generated via the Direct2D pipeline.

This demo shows both pipelines for rendering content, and this will be very important later on in future posts. Of interest to me is the d2d bits which have the EffectGraph stuff

 

This rendered surface is just bitmap content so you can mix XAML all over or under it at your convenience!

Here is a video of it running

 

 

Step 5 : Using these DirectX-C# libraries to render full page DirectX  under your XAML (SwapChainBackgroundPanel)

 

This second sample shows how to render a FULL screen DirectX surface underneath XAML using the SwapChainBackgroundPanel.

Without going into too much detail the SwapChainBackgroundPanel lets you render DirectX content underneath your XAML content, because the XAML content sits within the SwapChainBackgroundPanel as a child.

Here’s a video of it running

 

 

Conclusion

 

For convenience I’ve bundled my locally rendered SharpDx libraries and the Alex’s samples to get you quickly up and running, cause I know all you want is the demos

I’m really excited that we can use managed skills and render immediate mode DirectX graphics within XAML.

We may not have gotten XNA BUT I honestly believe we have something better with DirectX …

Incidently if you do want an XNA like framework for WinRT XAML, then you should look at ANX (which is XNA backwards). It’s written ontop of SharpDx and has some higher level abstractions like SpriteBatch, ResourceManager, Pipeline etc.

In future posts I will use these SharpDx libraries to render some cool animations that play nicely with XAML!!