PRS328 Schechter

Windows Presentation Foundation ("Avalon"): Advanced Graphics (Part 2) –Animation, Imaging, Effects And Media: 

Windows Presentation Foundation ('Avalon'): Advanced Graphics (Part 2) –Animation, Imaging, Effects And Media Greg Schechter PRS328 Software Architect Microsoft Corporation

Main TakeawaysIf you leave with nothing else…: 

Main Takeaways If you leave with nothing else… WPF is an integrated media platform Sampled media (bitmaps, video) is a big part of that Composability extends across all media types Applications/Controls build representations of media constructs, they don’t 'render' WPF implementation realizes them This makes all the difference for why Media, Effects, and Animation work The application still has the power to change this Anything can be animated

Review of Basics: 

Review of Basics Visual Tree All higher level WPF concepts ultimately build up a Visual Tree Coordinates in physical space XAML as a declarative object instantiation language With tools, XAML will typically not be hand-written andlt;Button RenderTransformOrigin='0.5,0.5' Width='80' Height='50' Content='Hello'andgt; andlt;Button.RenderTransformandgt; andlt;RotateTransform Angle='45' /andgt; andlt;/Button.RenderTransformandgt; andlt;/Buttonandgt; Button b = new Button(); b.Width = 80; b.Height = '50'; b.Content = 'Hello'; b.RenderTransformOrigin = new Point(0.5,0.5); Transform xf = new RotateTransform(); Xf.Angle = 45; b.RenderTransform = xf; Hello

A Brief Interlude: 

A Brief Interlude Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Writing documents on the Macintosh, circa 1984

Imaging: 

Imaging

Nimbus: 

Nimbus

Imaging: 

Imaging An image is rectangular, with physical size Encompasses bitmaps, which also have DPI Primarily used through the andlt;Imageandgt; element, referencing an ImageSource object ImageSource also used in ImageBrush, and, less commonly, ImageDrawing

Basic Image Element Example: 

Basic Image Element Example andlt;Window xmlns='…' Width='600' Height='460' Title='Basic Image'andgt; andlt;StackPanelandgt; andlt;Image Source='table-bowl.jpg'/andgt; andlt;TextBlock FontSize='24'andgt; A Basic Image Element andlt;/TextBlockandgt; andlt;/StackPanelandgt; andlt;/Windowandgt;

Basic Image Brush Example: 

Basic Image Brush Example andlt;Window xmlns='…' Width='600' Height='460' Title='ImageBrush Usage'andgt; andlt;Ellipse Stroke='Purple' StrokeThickness='5.0'andgt; andlt;Ellipse.Fillandgt; andlt;ImageBrush ImageSource='table-bowl.jpg' TileMode='Tile' Viewport='0,0,0.3,0.3' /andgt; andlt;/Ellipse.Fillandgt; andlt;/Ellipseandgt; andlt;/Windowandgt;

ImageSource: 

ImageSource BitmapFrame, BitmapDecoder are how one accesses multiframe images (like TIFF) Class hierarchy

Metadata: 

Metadata Rich, extensible support for Metadata In-place updates Available in native and managed code Straightforward query capabilities BitmapSource myImage = …; BitmapMetadata m = ((BitmapMetaData)myImage.Metadata); string focalLength = m.GetQuery('System.Photo.FocalLength'); string exposure = m.GetQuery('System.Photo.ExposureTime'); BitmapMetadata m = ((BitmapMetaData)myImage.Metadata); // XPath like, extensible syntax (this example for TIFF) string someValue = m.GetQuery('/ifd/{uint=123}');

15 Puzzle – Intro and Imaging: 

15 Puzzle – Intro and Imaging TileBrush is our friend Will help us go from

What’s Going On Here?: 

What’s Going On Here? This is the instance tree relating to WPF elements; The 'visual tree' created has more base constructs Each 'Border' has a Background property with the Brush portion pointing to the puzzle piece WPF evaluates the visual tree Conceptually a full walk and render every frame to regenerate In reality, many optimizations to minimize the walk Thus, we can potentially have an 'animated Image' Grid Window StackPanel StackPanel Button Button CheckBox Label Label ComboBox StackPanel Label ComboBox …

Imaging – Platform Basics: 

Imaging – Platform Basics Not the mainstream WPF usage, but critical for a class of customers Industrial strength, used extensively in the Windows Vista Shell 3rd party extensible bitmap CODEC architecture Microsoft-supplied CODECs for JPEG, TIFF, PNG, GIF, BMP, ICO Streams and NT Sections Thumbnails in the Windows Vista shell 'Mainline' encode / decode, explicit imaging operations, etc. Access through managed and native code Imaging engine in Windows Vista, can be used by Win32

Media: 

Media

Media XAML: 

Media XAML Framework Level – MediaElement andlt;Border Width='400' BorderBrush='Green' BorderThickness='9'andgt; andlt;StackPanelandgt; andlt;MediaElement Source='aero.wmv' /andgt; andlt;Buttonandgt;Helloandlt;/Buttonandgt; andlt;/StackPanelandgt; andlt;/Borderandgt; Audio VideoDrawing Controllable, exposed as Timeline/Clock

15Puzzle With Video: 

15Puzzle With Video

Media – What’s Available: 

Media – What’s Available Formats: WMV, MPEG, some AVIs Can be synchronized with animations Not in current bits MediaFoundation functionality used to instantiate playback machinery into a DirectShow graph WPF then grabs frames and uses them like all other surfaces

Effects: 

Effects

BitmapEffects: 

BitmapEffects BitmapSource in, BitmapSource out Typical usage, though, applies the BitmapEffect to a Visual in the Visual Tree BitmapEffects can be chained together User input works correctly through Effects Very small set today, hope to have more by Beta2 and RTM 3rd-party extensible

Using A BitmapEffect In XAML: 

Using A BitmapEffect In XAML BitmapEffect property on Visual… … and thus Button, ComboBox, Canvas, etc. Chaining is easily expressed andlt;StackPanel Height='100' Width='200' xmlns='…'andgt; andlt;StackPanel.BitmapEffectandgt; andlt;BlurBitmapEffect Radius='8' /andgt; andlt;/StackPanel.BitmapEffectandgt; andlt;Button FontSize='36'andgt;Helloandlt;/Buttonandgt; andlt;Button FontSize='36'andgt;Goodbyeandlt;/Buttonandgt; andlt;/StackPanelandgt;

BitmapEffects – Platform Basics: 

BitmapEffects – Platform Basics Not the mainstream WPF usage, but critical for a class of customers Write effects in native code Invoke through managed code (possible to invoke through native code) Can invoke directly on BitmapSource’s, and 'pull' out a result (not typical usage) PDC: Software only; Looking at hardware acceleration

15Puzzle – Adding Effects: 

15Puzzle – Adding Effects

Animation: 

Animation

Use Animation to Improve Your App: 

Use Animation to Improve Your App Helps direct attention Atmosphere and branding Tighter feedback of interactions UI change as continuous, not discrete Information visualization Picking out the relevant pieces Scale changes, changes over time Storytelling … but, keep machine resources in mind

Animation Basics: 

Animation Basics An animation is fundamentally a value that interpolates between known values over time Animate any Dependency Property Storyboards for coordinating animations Time-based, not frame-based 'Temporal Resolution Independence' Markup and code

Storyboards: 

Storyboards Emphasizes triggers, not properties to animate Triggers Routed Event, Property, Data, Multi triggers TriggerActions Begin, Stop, Pause, Seek, etc. Targeting Same as databinding 'Direct' targeting Property paths

Storyboard Example: 

Storyboard Example andlt;StackPanelandgt; andlt;StackPanel.Triggersandgt; andlt;EventTrigger RoutedEvent='Button.Click'andgt; andlt;EventTrigger.Actionsandgt; andlt;BeginStoryboardandgt; andlt;BeginStoryboard.Storyboardandgt; andlt;Storyboardandgt; andlt;ColorAnimation To='Yellow' Duration='0:0:0.5' Storyboard.TargetName='TheBrush' Storyboard.TargetProperty='Color' /andgt; andlt;DoubleAnimation To='45' Duration='0:0:2' Storyboard.TargetName='LowerEllipseTransform' Storyboard.TargetProperty='Angle' /andgt; ... andlt;/StackPanel.Triggersandgt; … remainder of contents of StackPanel, including x:Name'd TheBrush and LowerEllipseTransform … andlt;/StackPanelandgt;

Type Animations: 

Type Animations Common scalar types each have animate versions From/To with Duration/Repeat/Reverse/Accel/Decel KeyFrame-based animations across all types, with spline interpolation Extensible to new types, just need interpolation

15Puzzle + Animations: 

15Puzzle + Animations

What’s Going On Here?: 

What’s Going On Here? WPF watches for events Instantiates storyboards at the proper time (into 'clocks') UI Thread ticks, visits clocks, updates timelines, updates properties Changes are reflected into the composition thread, and that updates

Animation Goodies: 

Animation Goodies Arbitrary domains (e.g., Transform animation) Key frames w/ spline interpolation Path following Media timeline manipulation Animation composition AnimationEffects Arbitrary callbacks once per frame

Animation Goodies Gallery: 

Animation Goodies Gallery

The North Face: 

The North Face

Opportunities: 

Opportunities Enhanced productivity due to: Separation of appearance from logic Consistency across all types – predictability, learn-once, extensibility Great 'sampled media' platform and integration with vector-based media Leveraging GPU: take your apps further

Main Takeaways: 

Main Takeaways WPF is an integrated media platform Applications/Controls build representations of media constructs, they don’t 'render' Anything can be animated

Community Resources: 

Community Resources Most closely related sessions PRS309 – WPF Graphics Overview PRS305 – A Lap Around WPF PRS325 – 2D, 3D, and Text Presentation (PRS) Lounge Channel9 Tag: http://channel9.msdn.com/tags/Avalon Newsgroup: microsoft.public.windows.developer.winfx.avalon

Discussion: 

Discussion

Slide39: 

© 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.