1 / 54

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

CL31. Mastering WPF Graphics and Beyond: Build Responsive Windows Clients That Stand Out . David Teitlebaum Program Manager Microsoft Corporation. So What’s New? Overview of new Graphics features. New Features Entirely New Text Rendering Stack Layout Rounding

heba
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related