Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yahoo! On Microsoft .NET 3.0 and Microsoft Expression


Published on

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

Published in: Technology
  • Be the first to comment

Yahoo! On Microsoft .NET 3.0 and Microsoft Expression

  1. 1. Josh Jacobson Eric Burke Sr. Product Manager Sr. Technical Yahoo! Yahoo! Yahoo!
  2. 2. Today Wednesday 10 am Why is Yahoo! Here? Frog Design + Yahoo! Demo WPF Secrets REVEALED! Designer / Developer Workflow Q&A Sketches & Prototypes
  3. 3. Windows Vista Windows XP Mac OS X Others… Messenger Client Platform Yahoo! Client Platform
  4. 4. Pre-release
  5. 5. Eric Burke Sr. Technical Yahoo! In the trenches with WPF every day.
  6. 6. 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
  7. 7. 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!
  8. 8. 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, is writing a XAML-to-Code converter
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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!
  14. 14. 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!
  15. 15. 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!)
  16. 16. 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
  17. 17. 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
  18. 18. 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!
  19. 19. 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
  20. 20. 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, has a great example of a VirtualizingTilePanel
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Call C++ library functions from .NET DIBs, window regions, DWM, ShellExecute, Set/GetWindowLong Legacy C++ libs Make use of (Adam Nathan, MSFT, [DllImport(quot;dwmapi.dllquot;, PreserveSig = false)] public static extern void DwmExtendFrameIntoClientArea( IntPtr hwnd, ref MARGINS margins);
  25. 25. 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
  26. 26. 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
  27. 27. 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]
  28. 28. 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>
  29. 29. 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
  30. 30. CollectionViewSource / CollectionView Provides data navigation (“CurrentItem”) Supports sorting and grouping Bind multiple controls to one navigator
  31. 31. 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
  32. 32. 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
  33. 33. 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.
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Q&A Now with Josh & Eric Other members of the team here Get notified Wednesday session with Frog Design 10am Palazzo M Messenger blog: Eric’s blog: Eric’s email
  39. 39. Eric Burke Josh Jacobson Sr. Technical Yahoo! Sr. Product Manager Yahoo! Yahoo!
  40. 40. Thanks!
  41. 41. © 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.