Performing interop between XAML and DirectX (Windows Store apps using C++ and XAML)

Article
08/31/2015

From: Developing an end-to-end Windows Store app using C++ and XAML: Hilo

If you are developing a Windows Store app using C++ and XAML and you want to use Microsoft DirectX to improve performance or to reuse the assets in your app more effectively, you can use this article to get started.

Download

This 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 SwapChainBackgroundPanel class. For more info see DirectX and XAML interop.

You will learn

How to perform interop between XAML and DirectX in a Windows Store app using the SurfaceImageSource class.
How to use DirectX to create and apply an affect to an image.
How to control a Direct2D image effect in a XAML-based Windows Store app.

Applies to

Windows Runtime for Windows 8
Visual C++ component extensions (C++/CX)
XAML
DirectX

Building and running the quickstart

Build the DirectXRipple project as you would build a standard project.

On the menu bar, choose Build > Build Solution. The build step compiles the code and also packages it as a Windows Store app.
After you build the project, you must deploy it. On the menu bar, choose Build > Deploy Solution.
After you deploy the project, choose the DirectXRipple tile to run the app. Alternatively, in Microsoft Visual Studio, on the menu bar, choose Debug > Start Debugging. If you run the app in the debugger, Visual Studio deploys the project.

On the initial screen, choose the Load Image button. Use the file picker to select a JPG or PNG file, and then choose the Open button. The image is loaded and displayed on the screen. Choose any point on the image to observe the ripple effect. If you choose another point while the ripple is animating, the center of the ripple moves to that location. You can also drag the ripple while it's animating.

[Top]

Solution structure

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 the classes in DirectXRipple in another app. You can also adapt the organization and ideas that DirectXRipple provides.