Come see and hear about the amazing experiences Yahoo! has built using Microsoft .NET 3.0 and Microsoft Expression

2. Josh Jacobson Eric Burke
Sr. Product Manager Sr. Technical Yahoo!
Yahoo! Yahoo!

3. Today Wednesday 10 am
Why is Yahoo! Here? Frog Design + Yahoo!
Demo
WPF Secrets REVEALED! Designer / Developer Workflow
Q&A Sketches & Prototypes

10. Windows Vista
Windows XP
Mac OS X
Others…
Messenger Client Platform
Yahoo! Client Platform

11. Pre-release

12. Eric Burke
Sr. Technical Yahoo!
In the trenches with WPF every day.

13. Getting started with WPF
Application Model
Developer-Designer workflow
Window.AllowsTransparency: friend or foe?
UserControls are (usually) good!
What’s wrong with my ListBox?
But i have all this existing C++ code…
Data Binding
Other tidbits

14. Make heavy use of forums, blogs, etc. Provide small
repro code if possible!
Expect to do heavy refactoring of your work for a good 3-
6 months or more
Write a photo viewer, RSS reader, and/or a sidebar with
widgets
Use everything in the SDK at least once
Remember: this is 1.0 software!

15. Code first, XAML later
Understand what’s going on under the hood
Look in obj/ for files with the “.g.cs” extension
Petzold’s book (Applications = Code + Markup) teaches code
first – excellent read
Rob Relyea (MSFT, http://rrelyea.spaces.live.com/) is writing
a XAML-to-Code converter

16. Model
owned by developer
app logic
ViewModel
raw data sources
owned by developer
unmanaged code
heavy input from designer
C#, C++, etc.
transform/augment data
used mainly to support
bindings in UI
View
owned by designer
mostly in C#
contains the UI
mostly in XAML

17. Dev: build first cut of app
Design: apply styling using tools and
Design: build prototypes
request ViewModel changes
Dev: implement ViewModel changes
and integrate prototypes

18. Get designers using Blend
Designers (generally) don’t want to write XAML by hand – too
slow
For optimal workflow, make sure your project always loads in
Blend
Factor if necessary using UserControls and helper projects

19. Windows XP:
draw directly
to screen
WPF Rendering:
Render using
AllowsTransparency
DirectX
=“False”
Pipeline
Windows Vista:
draw to a shared
surface
managed by the
DWM

20. Call
WPF Rendering:
UpdateLayered
AllowsTransparency
Window() with a
=“True” on Windows
DC
XP
Oh, no! Fall back to
IDirect3DSurface::
software
GetDC() fails if
rendering
alpha channel!

21. Hooray!
WPF Rendering:
IDirect3DSurface::
AllowsTransparency
GetDC() works with
=“True” on Windows
alpha channels;
Vista
render with h/w
Oh, no! GDI is Must move bits from
software video memory to
main memory (can
emulated on
be sloooooow)
Vista!

23. Conclusions
on XP, complex scenes hurt performance
on Vista, slower system bus and large windows hurt
performance (“large” may not be as big as you think!)

24. Workarounds
Opaque window with custom HRGN
Overlapped “owned” windows to create illusion of a
nonrectangular window
[added advantage: better Maximize behavior]
Use Popup class
Caveat: always on top
Caveat: forces itself to stay onscreen

26. Problem: XAML file size gets unwieldy FAST
Hard to maintain the code
Hard to find what you need
Tools can’t handle crazy file sizes
UserControl is a custom “black box”
Different than a custom Control
Used for specific purpose in the given project

27. Faster time-to-build
Componentization means UI can be laid out top-down with
placeholders
Can live in a separate project
Smaller, so tools can handle them more easily
Makes iterating and testing far easier
Makes life easier on designers!

29. Often ItemsControls (e.g., ListBox) will have many more
items than can be displayed
Virtualization: creating physical representation for only
the visible items
Default behavior of ItemsControl uses
VirtualizingStackPanel
As list is scrolled, items coming into view get created;
items which are no longer in view get destroyed and
collected

30. Problem #1: using a non-virtualized ItemsPanel
e.g., WrapPanel, Grid, etc.
Currently, .NET framework includes only
VirtualizingStackPanel
Solution: write a custom VirtualizingPanel as the
ItemsPanel
Dan Crevier (MSFT, http://blogs.msdn.com/dancre/) has a
great example of a VirtualizingTilePanel

31. Problem #2: grouping data using CollectionViewSource
View treats each Group as one item
ItemsControl has no knowledge of Group’s contents
Solution: custom CollectionView subclass
Replace default ListCollectionView
Custom View plays nice with virtualization
Not a trivial exercise, but gives you better control

32. Legacy C++ code
Cross-platform C++ code
Functionality not in WPF (e.g., GetCursorPos)
Want to leverage WPF in your WinForms app, or vice-
versa
Use existing non-WPF third-party controls

33. AKA “Managed C++” – .NET and C++ in same DLL
Exposes .NET classes to the app
App can subclass or bind directly to these classes
Communicates with underlying unmanaged code
Example: Yahoo! Messenger core components

34. Call C++ library functions from .NET
DIBs, window
regions, DWM, ShellExecute, Set/GetWindowLong
Legacy C++ libs
Make use of http://www.pinvoke.net/ (Adam
Nathan, MSFT, http://blogs.msdn.com/adam_nathan/)
[DllImport(quot;dwmapi.dllquot;, PreserveSig = false)]
public static extern void DwmExtendFrameIntoClientArea(
IntPtr hwnd, ref MARGINS margins);

35. Host Windows Forms controls in WPF
use WindowsFormsHost to host the control
use PropertyMap to translate property values between WF
and WPF
common usage: WebBrowser control
Host WPF content in WF
use ElementHost to host a WPF UIElement
use PropertyMap to translate property values between WPF
and WF

36. uses AxHost (Windows Forms control)
Build managed wrapper using AxHost subclass
option 1: reference ActiveX control in VS
option 2: run AxImp.exe manually
Windowed controls are a “black box” – no opacity
Windowless controls work well

37. Think data, not code
Structure your data to facilitate binding
Add transforms or helper properties/methods to the
ViewModel layer
Example: Buddy.DisplayText logic
Subclass standard collections to add helper
properties/methods
Example: BuddyCollection.this[string]

38. INotifyPropertyChanged
use this for most binding sources
DependencyProperty
use when the property is a binding *target* or is animated
e.g., MyProperty=“{Binding Path=Foo}”
INotifyCollectionChanged
use to bind to a list of data items
e.g., ObservableCollection<T>

39. XmlSerializer is (often) your friend
Deserialize an XML stream into objects
Avoids using XPath over and over
Use xsd.exe (SDK tool) to generate classes for you from XML
schema or raw data
Example: Yahoo! search APIs

40. CollectionViewSource / CollectionView
Provides data navigation (“CurrentItem”)
Supports sorting and grouping
Bind multiple controls to one navigator

41. Use when you want to set properties on items of a type
other than the type that defines the property
Common usage: layout
(e.g., DockPanel.Dock, Grid.Row, Grid.Column)
Extend functionality without subclassing
Technically you don’t need attached properties, but it
allows you to use XAML

42. Use merged ResourceDictionaries
Equivalent to “#include” for ResourceDictionary
Allows use of multiple ResourceDictionary XAML files for
maintainability
Share styles and resources across projects
Example: Yahoo! Messenger and Frog Design

43. Leverage WPF’s command framework
Encapsulates functionality
Supports keyboard accessibility (InputBindings)
Allows developer or designer to add more entrypoints easily
Works across classes and assemblies
Does not burden designers with specific function names, etc.

44. Light WSIWYG XAML editors
XamlPad, XamlPadX, KaXaml, XamlCruncher
No code, just XAML
Quick UI testing/building
Helps you learn how to do tricks in XAML
Good for sending repro to others

45. Expression quot;Blendquot; (MSFT)
Designer: build the UI, animations, prototypes, styles; work with
full apps
Developer: use for quick styles, templates, animations; test
UserControls
Multiple source files, complex projects
Available in Expression Studio box received at MIX

46. Snoop (Peter Blois, MSFT)
Basically Spy++ for WPF
Allows you to examine the visual tree
Make some property changes live if you need to tweak
Magnify the UI
Inspect events and binding errors
Download from http://www.blois.us/Snoop/

47. Reflector (Lutz Roeder, MSFT)
Dig into the disassembly for .NET classes
Many cool add-ins (incluing a XAML resource viewer)
Download application and add-ins from http://www.aisto.com/roeder/

48. Q&A Now with Josh & Eric
Other members of the team here
Get notified http://messenger.yahoo.com/vista
Wednesday session with Frog Design 10am Palazzo M
Messenger blog: http://blog.messenger.yahoo.com
Eric’s blog: http://eric.burke.name/dotnetmania
Eric’s email burke@yahoo-inc.com

49. Eric Burke
Josh Jacobson
Sr. Technical Yahoo!
Sr. Product Manager
Yahoo!
Yahoo!

50. Thanks!

51. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.