Mastering wpf graphics and beyond build responsive windows clients that stand out l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 54

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


  • 763 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Mastering wpf graphics and beyond build responsive windows clients that stand out l.jpg

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 l.jpg

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


So what s new overview of new graphics features3 l.jpg

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


Why a new text stack complaints about the old stack l.jpg

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


A brief history of text rendering on windows in the beginning l.jpg

A Brief History of Text Rendering on WindowsIn the beginning…


A brief history of text rendering on windows in the beginning6 l.jpg

A Brief History of Text Rendering on WindowsIn the beginning…


A brief history of text rendering on windows in the beginning7 l.jpg

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


A brief history of text rendering on windows in the beginning8 l.jpg

A Brief History of Text Rendering on WindowsIn the beginning…

  • Some time later…

    • Grayscale Antialiasing

    • Later, Cleartype Rendering

      • Tripled horizontal resolution on LCDs


A brief history of text rendering on windows in the beginning9 l.jpg

A Brief History of Text Rendering on WindowsIn the beginning…


A brief history of text rendering on windows in the beginning10 l.jpg

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…..


A brief history of text rendering on windows in the beginning11 l.jpg

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


A brief history of text rendering on windows in the beginning12 l.jpg

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


A brief history of text rendering on windows gdi compatible width layout l.jpg

A Brief History of Text Rendering on WindowsGDI Compatible Width Layout


Text in wpf 4 0 prior to wpf 4 0 l.jpg

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


Text in wpf 4 0 prior to wpf 4 015 l.jpg

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


Text in wpf 4 0 4 0 gives y ou l.jpg

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.


Wpf 4 0 text stack l.jpg

WPF 4.0 Text Stack

demo

David Teitlebaum

Program Manager

WPF


Text in wpf 4 0 what other options are now available l.jpg

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


Text in wpf 4 0 what else l.jpg

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)


Text in wpf 4 0 apis in a nutshell l.jpg

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};

  • }


Text in wpf 4 0 apis in a nutshell21 l.jpg

Text in WPF 4.0(APIs In a Nutshell)

  • New TextFormatter constructor:

  • System.Windows.Media.TextFormatting.TextFormatter{

  • public static TextFormatter Create(TextFormattingModeformattingMode) ;

  • }


Layout rounding death to blurriness l.jpg

Layout RoundingDeath to Blurriness!

  • Motivation:

    • Sub-pixel position and sizing can cause blurriness

    • (right side images have rounded layout)


Layout rounding death to blurriness23 l.jpg

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


Layout rounding apis l.jpg

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;


  • Layout rounding gotchas l.jpg

    Layout RoundingGotchas!!!

    • OFF by default on WPF

    • ON by default on Silverlight


    Layout rounding l.jpg

    Layout Rounding

    demo

    David Teitlebaum

    Program Manager

    WPF


    And another text feature renderoptions cleartypehint l.jpg

    … 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


    And another text feature renderoptions cleartypehint28 l.jpg

    … And Another Text Feature!!!RenderOptions.ClearTypeHint

    • Useful for:

      • DrawingBrush

      • VisualBrush

      • Effects

      • <Element>.Opacity

      • <Element>.OpacityMask

      • Viewport2DVisual3D

      • Layered Windows


    Cleartypehint l.jpg

    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>


    Cleartypehint gotchas l.jpg

    ClearTypeHintGotchas!

    • Currently does not work with TextBox

    • Requires a Background is set behind text

    • Must be set for each IRT


    Animation easing functions organic animations for the masses l.jpg

    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


    Animation easing functions organic animations for the masses32 l.jpg

    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)


    Animation easing functions built in easing functions l.jpg

    Animation Easing FunctionsBuilt-In Easing Functions


    Custom easing functions l.jpg

    Custom Easing Functions

    • Derive from EasingFunctionBase and implement IEasingFunction

    • namespace System.Windows.Media.Animation

    • {

    • public interface IEasingFunction

    • {

    • // Methods

    • public double Ease(double normalizedTime);

    • }

    • }


    Easing functions l.jpg

    Easing Functions

    demo

    David Teitlebaum

    Program Manager

    WPF


    Pixel shader 3 0 support building on a good thing l.jpg

    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


    New pixel shader 3 0 apis l.jpg

    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);

    • }


    Cached composition caching live subtrees as bitmaps l.jpg

    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


    Cached composition you could sort of roll your own l.jpg

    Cached CompositionYou could sort-of roll your own…

    • Previously two basic ways:

      • RenderTargetBitmap

      • TileBrush caching via the RenderOptions.CachingHint attached property


    Cached composition what does it look like l.jpg

    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


    Cached composition apis l.jpg

    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; }

    • }


    Cached composition brush apis l.jpg

    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; }

    • }


    Cached composition usage l.jpg

    Cached Composition Usage

    • UIElement.CacheMode= new BitmapCache();

    • <Rectangle CacheMode="BitmapCache" />

    • <Rectangle>

    • <Rectangle.CacheMode>

    • <BitmapCacheRenderAtScale="4"/>

    • </Rectangle.CacheMode>

    • </Rectangle>


    Cached composition three properties l.jpg

    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


    Cached composition order is important l.jpg

    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>


    Cached composition when to use it l.jpg

    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


    Cached composition gotchas l.jpg

    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


    Cached composition l.jpg

    Cached Composition

    demo

    David Teitlebaum

    Program Manager

    WPF


    Visualscrollableareaclip hardware accelerated scrolling under ts rdp l.jpg

    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


    Last but not least m isc other stuff l.jpg

    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


    Slide51 l.jpg

    YOUR FEEDBACK IS IMPORTANT TO US!

    Please fill out session evaluation forms online at

    MicrosoftPDC.com


    Learn more on channel 9 l.jpg

    Learn More On Channel 9

    • Expand your PDC experience through Channel 9

    • Explore videos, hands-on labs, sample code and demos through the new Channel 9 training courses

      channel9.msdn.com/learn

    Built by Developers for Developers….


  • Login