Mastering WPF Graphics and Beyond: Build Responsive Windows Clients That Stand Out

1. CL31 Mastering WPF Graphics and Beyond: Build Responsive Windows Clients That Stand Out David Teitlebaum Program Manager Microsoft Corporation

2. So What’s New?Overview of new Graphics features • New Features • Entirely New Text Rendering Stack • Layout Rounding • ClearTypeHint – Clear Type on IRTs • Animation Easing Functions • Pixel Shader 3.0 Support • Cached Composition • VisualScrollableAreaClip

3. So What’s New?Overview of new Graphics features… • Other Stuff • Faster Default Image Resampling • Removal of Legacy BitmapEffect Support • Removal of Fixed-Function Rendering Pipeline

4. Why a New Text Stack?Complaints about the old stack: • General blurriness of rendered text • Small characters especially blurry • Small East-Asian characters sometimes hard to distinguish • Lack of rendering options

5. A Brief History of Text Rendering on WindowsIn the beginning…

6. A Brief History of Text Rendering on WindowsIn the beginning…

7. A Brief History of Text Rendering on WindowsIn the beginning… • Aliased Rendering • Glyphs on pixel boundaries • Sharp horizontal and vertical features • Curved and diagonal portions of text exhibited substantial aliasing • TrueType fonts encoded text as quadratic Beziers • Arbitrary scaling of glyphs • Hinting Language • Embedded Bitmaps

8. A Brief History of Text Rendering on WindowsIn the beginning… • Some time later… • Grayscale Antialiasing • Later, Cleartype Rendering • Tripled horizontal resolution on LCDs

9. A Brief History of Text Rendering on WindowsIn the beginning…

10. A Brief History of Text Rendering on WindowsIn the beginning… • Possible to position glyphs on sub-pixel boundaries • Glyphs could be rendered with their “intended” (Ideal) spacing • But there was a problem…..

11. A Brief History of Text Rendering on WindowsIn the beginning… • The problem: • Windows' dialogs and UI had been designed for the original, pixel-aligned layout • Text using Ideal WidthLayout is a different size

12. A Brief History of Text Rendering on WindowsIn the beginning… • The Solution: • GDI Compatible Width Layout • Lays out characters on pixel boundaries • Same layout as GDI's original mode • Rendering is sharper than with Ideal Width Layout • Almost ALL Win32/GDI/GDI+/Winforms Applications use this rendering mode

13. A Brief History of Text Rendering on WindowsGDI Compatible Width Layout

14. Text in WPF 4.0 Prior to WPF 4.0: • WPF only supported Ideal Width Layout • Note the 'l's – each looks different because they are being placed in Ideal (not pixel aligned) screen locations

15. Text in WPF 4.0 Prior to WPF 4.0: • Why Ideal Width? • Conscious design choice between word/sentence/paragraph shape and character sharpness • Why was GDI Compatible Width rendering difficult? • GDI Compatible mode is not conducive to scalable UIs • E.g. Bounding boxes of characters do NOT scale linearly with a render transform with GDI Compatible Width layout

16. Text in WPF 4.0 4.0 gives you: • GDI Compatible Width Layout • Note the 'l's – all identical • Note also that this renders almost identically to GDI • This is OPT-IN – the default is still Ideal Width Rendering.

17. WPF 4.0 Text Stack demo David Teitlebaum Program Manager WPF

18. Text in WPF 4.0 What other options are now available? • The “Text Hinting Mode” is now selectable • Governs optimization for animation vs. static viewing • WPF has previously used “automagic” animation detection • Actual behavior change is a result of: • Baseline Snapping • Vertical Antialiasing • Hinting Language coordinate system

19. Text in WPF 4.0 What Else? • Sharper East-Asian Fonts • WPF Can now render using the embedded font bitmaps in many East Asian Languages • Better foreign language support • New glyph shaping engines provide better international support (e.g. diacritics)

20. Text in WPF 4.0(APIs In a Nutshell) • Attached properties (TextOptions static class) • System.Windows.Media{ • enumTextFormattingMode {Ideal, Display}; • enumTextRenderingMode {Auto, Aliased, Grayscale, ClearType}; • enumTextHintingMode {Auto, FixedText, AnimatedText}; • }

21. Text in WPF 4.0(APIs In a Nutshell) • New TextFormatter constructor: • System.Windows.Media.TextFormatting.TextFormatter{ • public static TextFormatter Create(TextFormattingModeformattingMode) ; • }

22. Layout RoundingDeath to Blurriness! • Motivation: • Sub-pixel position and sizing can cause blurriness • (right side images have rounded layout)

23. Layout RoundingDeath to Blurriness! • Not a graphics feature – a Layout Feature • How is it different from Pixel Snapping? • Guidelines • Pixel Snapping is difficult to use and often doesn't work • Layout Rounding changes both the position and the size of elements

24. Layout Rounding APIs • UIElement.UseLayoutRounding=”True” • Attached, inherited dependency property: • <Button Content="Blurry Button" x:Name="btn" UseLayoutRounding="True"/> • Also exists on FrameworkElement: • btn1.UseLayoutRounding = true;

25. Layout RoundingGotchas!!! • OFF by default on WPF • ON by default on Silverlight

26. Layout Rounding demo David Teitlebaum Program Manager WPF

27. … And Another Text Feature!!!RenderOptions.ClearTypeHint • Allows Cleartype to be used in Intermediate Render Targets (IRTs) • Normally disallowed due to the possibility of non-unity alpha color channel • User knows if surface is transparent

28. … And Another Text Feature!!!RenderOptions.ClearTypeHint • Useful for: • DrawingBrush • VisualBrush • Effects • <Element>.Opacity • <Element>.OpacityMask • Viewport2DVisual3D • Layered Windows

29. ClearTypeHint • Setting ClearTypeHint through C#: • RenderOptions.SetClearTypeHint(visual, ClearTypeHint.Enabled); • Setting ClearTypeHint though XAML: • <Window … AllowsTransparency=”True” WindowStyle=”None” RenderOptions.ClearTypeHint="Enabled"> • <TextBlock > • Text goes here. • </TextBlock> • </Window>

30. ClearTypeHintGotchas! • Currently does not work with TextBox • Requires a Background is set behind text • Must be set for each IRT

31. Animation Easing FunctionsOrganic Animations for the Masses • Added an EasingFunction property to all From/To and By animation types • Easing Function modifies animation progress • Allows for custom modification of any animation’s progress

32. Animation Easing FunctionsOrganic Animations for the Masses • Normal progress ranges from 0…1 • Easing Functions allow progress ranges below 0 and above 1 (e.g. bouncing)

33. Animation Easing FunctionsBuilt-In Easing Functions

34. Custom Easing Functions • Derive from EasingFunctionBase and implement IEasingFunction • namespace System.Windows.Media.Animation • { • public interface IEasingFunction • { • // Methods • public double Ease(double normalizedTime); • } • }

35. Easing Functions demo David Teitlebaum Program Manager WPF

36. Pixel Shader 3.0 SupportBuilding on a good thing • PS 3.0 is now supported • Max executed instruction: 96 -> 65535 • Constant registers: 32 -> 224 • Texture indirections: 4 -> unlimited • True flow control (branching, loops, etc…) • NO Software Fallback • Means no PS 3.0 for RTB, printing, RDP / TS, base tile of a tiled TileBrush, or when app is running in SW

37. New Pixel Shader 3.0 APIs • public static class RenderCapability • { • <new behavior> public static boolIsPixelShaderVersionSupported(short majorVersionRequested, short minorVersionRequested); • <new> public static boolIsPixelShaderVersionSupportedInSoftware (short majorVersionRequested, short minorVersionRequested); • <new> public static intMaxPixelShaderInstructionSlots(short majorVersionRequested, short minorVersionRequested); • }

38. Cached CompositionCaching live subtrees as bitmaps • Motivation: • Vector rasterization is a very expensive operation • Video cards are optimized to render textures • Difficult to cache vector data • Per-primitive AA forces retessellation on scale / translation

39. Cached CompositionYou could sort-of roll your own… • Previously two basic ways: • RenderTargetBitmap • TileBrush caching via the RenderOptions.CachingHint attached property

40. Cached CompositionWhat does it look like? • New Property on UIElement • UIElement.CacheMode • Currently accepts an instance of BitmapCache • New Brush • BitmapCacheBrush – basically a cached VisualBrush • Interactive • XAML-able • Hardware Accelerated

41. Cached Composition APIs • public abstract class CacheMode: DependencyObject • { • internal CacheMode (); • } • public class BitmapCache : CacheMode • { • public BitmapCache (); • public double RenderAtScale { get; set; } • public boolSnapsToDevicePixels { get; set;} • public boolEnableClearType { get; set; } • }  • public abstract class UIElement : DependencyObject • { • public CacheModeCacheMode { get; set; } • }

42. Cached Composition Brush APIs • public class BitmapCacheBrush: Brush • { • public BitmapCacheBrush() { } • public Visual Target { get; set; } • // on Silverlight, Target will be of type UIElemement • public BitmapCacheBitmapCache { get; set; } • } • // CHANGES TO Viewport2DVisual3D to accommodate BitmapCache • public sealed class Viewport2DVisual3D : Visual3D • { • public CacheModeCacheMode{ get; set; } • }

43. Cached Composition Usage • UIElement.CacheMode= new BitmapCache(); • <Rectangle CacheMode="BitmapCache" /> • <Rectangle> • <Rectangle.CacheMode> • <BitmapCacheRenderAtScale="4"/> • </Rectangle.CacheMode> • </Rectangle>

44. Cached CompositionThree Properties • RenderAtScale • Renders cache at some multiple of subtree LOCAL-SPACE bounds • SnapsToDevicePixels • Renders on pixel boundaries • Does NOT use layout • EnableClearType • Alias to ClearTypeHint attached property

45. Cached CompositionORDER IS IMPORTANT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! • <Parent Node> • Render Options • VisualScrollableAreaClip • Offset (LayoutOffset in SL) • Transform (RenderTransform for SL) • Perspective (Currently an SL-only feature) • Clip • Effect • Opacity • OpacityMask • Composition Cache • RenderData for WPF /Shape Data in SL (e.g. vector path with brush/stroke) • <Child Nodes>

46. Cached CompositionWhen to use it! • When expensive content would require rerendering • When IRTs would be repeatedly regenerated • e.g. All inputs to Effects (including ImageBrushes) • Bypasses IRT allocation / deallocaiton cost

47. Cached CompositionGotchas! • Only a few caches please! • Video RAM still isn't free • Don't set huge values for RenderAtScale! • Drawing into a huge bitmap is slow • Reading from a huge bitmap is slow • Understand interaction of Brush/Element caches

48. Cached Composition demo David Teitlebaum Program Manager WPF

49. VisualScrollableAreaClip Hardware Accelerated Scrolling under TS / RDP • Allows remoting of GDI Scroll Blit operation to display machine • Basically a rectangular Clip • Works with Offset and Transform properties • Offsets moves content within clip • HUGE number of caveats – use with extreme care

50. Last But Not Least…. Misc Other Stuff • Faster Default Image Resampling • Default: Fant -> Bilinear • Removal of Legacy Bitmap Effect Support • Now No-ops • Removal of Fixed-function Rendering Pipeline • New Tier1: PS 2.0, no VS, 60 megs of Video RAM