Combining XAML and Direct X Jesse Bishop Program
Combining XAML and Direct. X Jesse Bishop Program Manager, Windows XAML team Microsoft Corporation
Review: XAML in Windows 8 Your Metro-style UI framework • • Built in and custom controls Layout, styling, databinding Media, animation, drawing Design-time tools A focus on performance • • • Leveraging hardware Independent animations Fast rendering and composition
Review: Direct. X in Windows 8 Your graphics solution Everything in Windows 8 is built around Direct. X: hardware to OS to UI frameworks Control vs. Complexity A tradeoff between difficulty and power of lower level APIs More work to align with Metro style guidelines
Rich UI + Real-time Graphics
The Best of Both Worlds XAML Direct. X Interactivity, control model Highest performance rendering UI, drawing, animations Direct device access Data binding, media, HTML Complex 2 D/3 D graphics, text Design-time experience Image effects
When do you want UI + Graphics? Example scenarios: Visual design, modeling, creativity Complex image processing Large documents, maps Simulations Games 1. Direct. X graphics added to a primarily XAML UI 2. Large-scale Direct. X graphics mixed with some UI 3. Direct. X-focused app with minimal UI A one-size-fits-all approach wasn’t sufficient across the broad range of scenarios. So, we added 3 XAML types which each target a different need.
Interop Functionality Integration Easy composition of XAML + Direct. X using familiar XAML model All functionality of both XAML and Direct. X Performance Low-latency input and interactivity Incremental rendering for both XAML and Direct. X content Low overhead: retained-mode XAML and immediate-mode Direct. X together C++ Only XAML code-behind can be managed, but interop Direct. X is C++ only (without wrappers) Query for native interfaces of XAML Win. RT types to access interop methods
1. Direct. X graphics added to a primarily XAML UI 2. Large-scale Direct. X graphics mixed with some UI 3. Direct. X-focused app with minimal UI
Surface. Image. Source A XAML Image. Source type. You can draw any 2 D/3 D content with Direct. X then use it to fill any XAML element. Framework supplies a DX surface you draw to whenever you want to update content. Conceptually similar to WPF’s D 3 DImage – but easier and more powerful Fully integrated with XAML composition: z-index, transforms, animation. No “airspace” issues <Ellipse x: Name="Ellipse 1" Stroke="Black" Height="300" Width="300" /> Image. Brush^ brush = ref new Image. Brush(); brush->Image. Source = ref new Surface. Image. Source(300, 300); Ellipse 1 ->Fill = brush;
Surface. Image. Source Definition interface ISurface. Image. Source. Native: IUnknown { Set. Device(IDXGIDevice *p. Device); }; Begin. Draw( RECT update. Rect, IDXGISurface** p. Surface, POINT* offset ); End. Draw();
Surface. Image. Source demo
1. Direct. X graphics added to a primarily XAML UI 2. Large-scale Direct. X graphics mixed with some UI 3. Direct. X-focused app with minimal UI
Virtual. Surface. Image. Source Extends Surface. Image. Source concept to support huge virtualized areas. Useful when content is larger than what fits on the screen. Potentially MUCH larger. Uses a tiling + callback approach. Content is split into rectangular regions. Framework requests updates from your app when it needs to render a region. Performance characteristics are tuned for large content. Automatically integrates with XAML Scroll. Viewer so it knows what’s currently visible. Manages a smart cache of tiles.
Virtual. Surface. Image. Source Definition interface IVirtual. Surface. Image. Source. Native: ISurface. Image. Source. Native { Register. For. Updates. Needed(IVirtual. Surface. Updates. Callback. Native *p. Callback); Get. Update. Rects(RECT *p. Updates, DWORD count); Get. Update. Rect. Count(DWORD *p. Count); Invalidate(RECT update. Rect); /*. . . */ }; interface IVirtual. Surface. Updates. Callback. Native: IUnknown { Updates. Needed(); };
Virtual. Surface. Image. Source Usage Register your Updates. Needed() callback This gets called when a region of the surface needs to be updated Get the list of tiles that need to be updated with Get. Update. Rects() Draw updates using the same Begin. Draw()/End. Draw() approach If a region needs an update, Invalidate() it Especially for off-screen content, since you can also update using Begin. Draw()/End. Draw() You can dynamically resize the total area as needed
1. Direct. X graphics added to a primarily XAML UI 2. Large-scale Direct. X graphics mixed with some UI 3. Direct. X-focused app with minimal UI
Swap. Chain. Background. Panel Full-screen Direct. X app with XAML content as an overlay. Inherits from Grid control to enable easy XAML layout Full control of Direct. X surface. Enables low latency interaction and control over present timing Not required to be tied to the XAML UI thread, though it can be Tradeoff between more control vs. closer integration with XAML scene. Full-screen only Must be the root element of an app XAML child elements are drawn on top
Swap. Chain. Background. Panel Definition interface ISwap. Chain. Background. Panel. Native: IUnknown { Set. Swap. Chain(IDXGISwap. Chain *p. Swap. Chain); };
Using Swap. Chain. Background. Panel <Swap. Chain. Background. Panel x: Class="My. App. Main. Page" x: Name="Swap. Chain. Panel" Pointer. Moved="On. Pointer. Moved"> <Text. Block Text="Here's some XAML content!" /> </Swap. Chain. Background. Panel>
Creating the Swap Chain dxgi. Factory-> Create. Swap. Chain. For. Composition( m_d 3 d. Device. Get(), &swap. Chain. Desc, nullptr, &m_swap. Chain ); ISwap. Chain. Background. Panel. Native Com. Ptr< > panel. Native; reinterpret_cast<IUnknown*>(Swap. Chain. Panel)->Query. Interface( IID_PPV_ARGS(&panel. Native) ); Set. Swap. Chain panel. Native-> (m_swap. Chain. Get());
Swap. Chain. Background. Panel Tips Adding XAML children Be mindful of overdraw: scope XAML element sizes to just the area required to display content Use Debug. Settings: : Is. Overdraw. Heat. Map. Enabled to visualize overdraw Drawing content Create a landscape swap chain and apply rotation as needed Composition. Target: : Rendering event for real-time updates on XAML UI thread Async queue to a 2 nd DX device for long computation or render tasks Input handling Can use normal XAML input event handlers on the Swap. Chain. Background. Panel element Xinput for controllers if applicable
App Composition DX XAML Swap. Chain. Background. Panel Surface. Image. Source
Swap. Chain. Background. Panel demo
Recap Three approaches to combining XAML + Direct. X Surface. Image. Source, Virtual. Surface. Image. Source, Swap. Chain. Background. Panel You can mix and match in the same app Consider the scenario you’re targeting XAML alone will work great for many apps – retained-mode graphics with smooth 60 fps animations Surface. Image. Source for close integration with XAML composition at a per-element level Virtual. Surface. Image. Source for scrolling/zooming large-scale Direct. X content Swap. Chain. Background. Panel for adding UI to full-screen Direct. X games and apps Structuring your app Define your Metro-style UI using XAML markup Use XAML code-behind for UI-related processing such as input handling and view state changes Wrapping interop code in a native Win. RT DLL allows it to be used from managed code as well Query XAML type for its native interface to access Direct. X interop methods
Resources Blog: Combining XAML and Direct. X http: //blogs. msdn. com/b/windowsappdev/archive/2012/03/15/combining-xaml-and-directx. aspx MSDN: Direct. X and XAML interop http: //msdn. microsoft. com/en-us/library/windows/apps/hh 825871. aspx Direct. X + XAML 3 D game sample app http: //code. msdn. microsoft. com/windowsapps/Metro-style-Direct. X-18 f 98448 Other sample apps http: //code. msdn. microsoft. com/windowsapps/Magazine-Sample-2 a 657289 http: //code. msdn. microsoft. com/windowsapps/Direct 2 D-lighting-effects-e 0801 da 3
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U. S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
- Slides: 27