DirectX and XAML in Windows (Phone) 8: Part 0 of N

DirectX is a powerful beast that enables creation of stunning graphics oriented applications (not just games). On the other hand, XAML is used to quickly create basic application UI. Having both in a single application seems like an obvious choice. For example: when building a game, you can use XAML to create level selection screens, mode selection screen, options page, etc while leaving DirectX to power the game itself. It is only natural to combine the best of the two in a single application.

Since we now have both Windows 8 and Windows Phone 8 out in the wild, I will dedicate some time on this blog to describing how to combine XAML and DirectX on both platforms. This is the first blog post in the series and will provide some basic overview of future posts.

Since DirectX is exposed only in C++ project templates, first couple of posts will feature C++/CX only. Later on, I will describe how to bridge the gap to the managed world using SharpDX for Windows 8. All examples will be rather simplistic, but you can use your imaginations to build wonderful new things.

During the series, I will be using Microsoft Visual Studio 2012 Express for Windows 8 and Microsoft Visual Studio 2012 Express for Windows Phone, which you can download from the following links: Express for Windows 8 and Express for Windows Phone. All samples for Windows 8 can can also run on Windows RT since we are building a Windows Store app.

DirectX is a low level API for using the most out of your graphics cards. Since it is primarily used for games, it is not a part of the standard Windows UI stack. If you want to build an application using bothXAML and DirectX, you need to interoperate in a special way. There are three basic ways your application can use DirectX and XAML:

1. Use DirectX surface as a part of the screen (e.g. simple modeler tool using XAML for properties and DX for visualiation)
2. Use DirectX surface that is significantly larger than screen (e.g. maps, document viewers)
3. Use DirectX surface in fullscreen mode and add little XAML for basic UI (e.g. games, simulations)

You can read more about these three modes on MSDN or on Windows 8 app developer blog. Note that for Windows Phone there is no XAML alternative for second scenario.

In the first and second case described above, you render on a target surface and then use that surface as a ImageBrush for your elements. The size and arrangement of the XAML element in first scenario is handled like any other XAML element. When you want full control of the drawing surface (e.g. for games), go for the third option and manage your own swap chain.

All source code will be available on github as the series progresses.

In the next blog post I will describe how to incorporate a simple DirectX surface in a XAML page.