Yahoo! on Microsoft .NET 3.0 and Microsoft ExpressionJosh JacobsonSr. Product ManagerYahoo!

Eric BurkeSr. Technical Yahoo!Yahoo!

Yahoo! Messenger for Windows Vista

Today

Why is Yahoo! Here?Demo

WPF Secrets REVEALED!Q&A

Wednesday 10 am

Frog Design + Yahoo!

Designer / Developer Workflow

Sketches & Prototypes

Why?

One size does not fit all.

The right client

for the right person

at the right time.

Common Platform, Native Interfaces

Win

dow

s X

P

Mac

OS

X

Oth

ers

…

Win

dow

s V

ista

Yahoo! Client Platform

Messenger Client Platform

Yahoo! Messenger for Windows Vista

Pre-release

demo

WPF Secrets Revealed!

Eric BurkeSr. Technical Yahoo!In the trenches with WPF every day.

Overview

Getting started with WPFApplication ModelDeveloper-Designer workflowWindow.AllowsTransparency: friend or foe?UserControls are (usually) good!What’s wrong with my ListBox?But i have all this existing C++ code…Data BindingOther tidbits

Getting Started with WPF

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!

Getting Started (cont’d)

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

Application ModelModelowned by developerapp logicraw data sourcesunmanaged codeC#, C++, etc.

ViewModelowned by developerheavy input from designertransform/augment dataused mainly to support bindings in UI

mostly in C#

Viewowned by designercontains the UImostly in XAML

Developer-Designer Workflow

Dev: build first cut of app

Dev: implement ViewModel changes and integrate

prototypes

Design: build prototypesDesign: apply styling using tools and request ViewModel

changes

Designer-Developer Workflow

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

Window Transparency

WPF Rendering:AllowsTransparen

cy=“False”

Render using

DirectX Pipeline

Windows XP: draw

directly to screen

Windows Vista:

draw to a shared surface managed by

the DWM

Window Transparency (cont’d)

WPF Rendering:AllowsTransparen

cy=“True” on Windows XP

Call UpdateLayeredWindow() with

a DC

Oh, no! IDirect3DSurface:

:GetDC() fails if alpha channel!

Fall back to software rendering

Window Transparency (cont’d)

WPF Rendering:AllowsTransparen

cy=“True” on Windows Vista

Hooray! IDirect3DSurface:

:GetDC() works

with alpha channels; render

with h/w

Oh, no! GDI is software

emulated on Vista!

Must move bits from video

memory to main memory (can be

sloooooow)

Layered Window Performance

demo

Window Transparency (cont'd)

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

Window Transparency (cont'd)

WorkaroundsOpaque window with custom HRGN

Overlapped “owned” windows to create illusion of a nonrectangular window[added advantage: better Maximize behavior]

Use Popup classCaveat: always on topCaveat: forces itself to stay onscreen

Overlapped "Owned" Windows

demo

UserControls

Problem: XAML file size gets unwieldy FASTHard to maintain the codeHard to find what you needTools can’t handle crazy file sizes

UserControl is a custom “black box”Different than a custom ControlUsed for specific purpose in the given project

UserControls

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!

UserControls

ItemsControls: VirtualizationOften 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

ItemsControls: Virtualization (cont’d)

Problem #1: using a non-virtualized ItemsPanele.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

ItemsControls: Virtualization (cont’d)

Problem #2: grouping data using CollectionViewSource

View treats each Group as one itemItemsControl has no knowledge of Group’s contents

Solution: custom CollectionView subclassReplace default ListCollectionViewCustom View plays nice with virtualizationNot a trivial exercise, but gives you better control

Interop: Why do you need it?

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

Interop: C++/CLI

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

Interop: P/Invoke

Call C++ library functions from .NETDIBs, 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("dwmapi.dll", PreserveSig = false)]

public static extern void DwmExtendFrameIntoClientArea(

IntPtr hwnd, ref MARGINS margins);

Interop: Windows Forms

Host Windows Forms controls in WPFuse WindowsFormsHost to host the controluse PropertyMap to translate property values between WF and WPFcommon usage: WebBrowser control

Host WPF content in WFuse ElementHost to host a WPF UIElementuse PropertyMap to translate property values between WPF and WF

Interop: ActiveX

uses AxHost (Windows Forms control)

Build managed wrapper using AxHost subclassoption 1: reference ActiveX control in VSoption 2: run AxImp.exe manually

Windowed controls are a “black box” – no opacity

Windowless controls work well

Data Binding Tips

Think data, not codeStructure 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]

Data Binding Tips (cont’d)

INotifyPropertyChangeduse this for most binding sources

DependencyPropertyuse when the property is a binding *target* or is animatede.g., MyProperty=“{Binding Path=Foo}”

INotifyCollectionChangeduse to bind to a list of data itemse.g., ObservableCollection<T>

Data Binding Tips (cont’d)

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

Data Binding Tips (cont’d)

CollectionViewSource / CollectionView

Provides data navigation (“CurrentItem”)

Supports sorting and grouping

Bind multiple controls to one navigator

Attached Properties

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

Other Tidbits

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

Other Tidbits (cont’d)

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.

Tools and Resources

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

Tools and Resources

Expression "Blend" (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

Tools and Resources (cont’d)

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/

Tools and Resources (cont’d)

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/

Crave more?Q&A Now with Josh & EricOther members of the team hereGet notified http://messenger.yahoo.com/vistaWednesday session with Frog Design 10am

Palazzo MMessenger blog:

http://blog.messenger.yahoo.com

Eric’s blog: http://eric.burke.name/dotnetmaniaEric’s email burke@yahoo-inc.com

Q&A

Josh JacobsonSr. Product ManagerYahoo!

Eric BurkeSr. Technical Yahoo!Yahoo!

Thanks!

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