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.

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.