Wednesday, 2 January 2013

Performing interop between XAML and DirectX

If you’re developing a Windows Store app using C++ and XAML and you want to use DirectX to improve performance or to reuse the assets in your app more effectively, a quickstart I’ve worked on may be just what you need.

The quickstart uses the SurfaceImageSource class, which allows you to compose DirectX graphics within a XAML element. If you need to display XAML in front of a full-screen DirectX swap chain you should use the SwapChaingBackgroundPanel class instead. For more info see DirectX and XAML interop.

The accompanying sample app allows you to load an image, which is displayed on screen. A ripple effect can then be applied to the image by choosing any point on the image to start the ripple effect. If you choose another point while the ripple is animating, the center of the ripples moves to that location. You can also drag the ripple while it’s animating. The DirectXRipple Visual Studio solution contains one project, which includes these key classes:

  • App class. Specifies the entry point for the app and handles activation and suspension events.
  • BasicReaderWriter class. Reads the data from the compiled ripple effect pixel shader.
  • BasicTimer class. A timer class that’s used to drive the render loop of the app.
  • D2DImageSource class. The interop class between DirectX and XAML.
  • MainPage class. Defines a XAML-based page class that contains a simple user interface.
  • RippleEffect class. Implements the ripple effect as a wrapper around a pixel shader.
  • RippleImageSource class. Inherits from the D2DImageSource class and applies the moving ripple effect to the image.
  • WICImage class. Uses the Windows Imaging Component (WIC) to load and display an image.

With little or no modification, you can reuse many of these classes in another app. You can also adapt the organization and ideas that these classes provide.

The quickstart can be viewed here.