Windows Presentation Foundation ("Avalon"): Beautiful Code, Beautiful Design - Applications Your Designers Can Work With Robert Ingebretsen PRS317 Program Manager, WPF Microsoft Corporation

89 Percentage of business readers who called design “an essential way to make lasting connections with consumers” Source: Fast Company magazine, June 2005 %

good enough.

good enough, meet… great!

powerful visual and interactive capabilities clean separation of UI and logic great tools for developers and designers

PhotoStore Basic UI

developer / designer workflow

Designer Details Lost in Translation

while (!design.IsPerfect) {Designer.CreateNewDesign();Developer.ImplementNewDesign(); design.IsPerfect = false; }

while (!design.IsPerfect) {Designer.CreateNewDesign();Developer.ImplementNewDesign(); design.IsPerfect = false; if (Schedule.SlipCount >= x) break; }

designer: independent UI creator no more “translation” errors parallel workflow realtime iteration and feedback

Window1.xaml.csContains: Application logic Created by: Application developer Window1.xamlContains: Principal UI (controls, layout, etc.) Created by: Application developer or designer Design Experience: By hand or using a visual tool Styles.xamlContains: Application “style” (visual description of UI elements) Created by: Application designer Design Experience: By hand or using a visual tool project structure Data model, event names, element names, etc. Resource names and element types.

PhotoStore Project

styling is… resourcesstylestemplatestriggersstoryboards

styles centrally define the appearance and interactive behaviors of the elements in your app

style drilldown lookup key can be a name or a type Styled Button </Style>

style drilldown lookup key can be a name or a type Styled Button </Style>

style drilldown use to set properties on the styled element Styled Button </Style>

style drilldown styles can be based on other styles Styled Button </Style> </Style>

Styles and Resources

templates describe the visual structure of a control

template drilldown control introduces the Template property which defines the control’s structure and appearance

template drilldown use composition to describe the control’s visual tree Templated Button </ControlTemplate>

template drilldown use contract elements to ensure correct functionality Templated Button </ControlTemplate>

template drilldown use to define a visual representation of a data object </ControlTemplate>

Templates

triggers and storyboards Use with styles and templates to create rich and dynamic interaction

triggers and storyboards drilldown triggers are activated when a specified condition becomes true </Trigger>

triggers and storyboards drilldown define “triggered” property changes using (the previous state gets cached) Styled Button </Trigger>

triggers and storyboards drilldown use storyboards with to add dynamic animations Styled Button </EventTrigger>

Storyboards and Triggers

Window1.xaml.csContains: Application logic Created by: Application developer Window1.xamlContains: Principal UI (controls, layout, etc.) Created by: Application developer or designer Design Experience: By hand or using a visual tool Styles.xamlContains: Application “style” (visual description of UI elements) Created by: Application designer Design Experience: By hand or using a visual tool project structure

Window1.xaml.csContains: Application logic Created by: Application developer Window1.xaml Professional Version Window1.xaml Consumer Version Window1.xaml MCE Version targeted experiences

Keyword: targeted

Targeted Experiences

with power comes responsibility

HTML The Early Years

Font Salad Frankly,

building great software with WPF Start with what you know Involve a designer when in unchartered territory Remember that your brand is the entire experience Make software that lasts—just as enjoyable the 100th time as the 1st Create apps that are appropriate for the intended audience or user Draw focus to hero and McGuffin moments

Good design means that beauty and usability are in balance. Donald A. Norman, Interactions, July/August 2002

related talks databinding: PRS324 (Thursday, 3:45) building controls: PRS431 (Friday, 10:30) layout: PRS329 (Thursday, 5:15) rich content: PRS330 (Friday, 8:30) designer tool overview: TLN213 (Thursday, 11:30) me blog: demo source:

thank you.

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