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

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

6. good enough.

7. good enough, meet… great!

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

9. PhotoStore Basic UI

10. developer / designer workflow

11. Designer Details Lost in Translation

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

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

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

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

16. PhotoStore Project

17. styling is… resourcesstylestemplatestriggersstoryboards

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

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

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

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

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

23. Styles and Resources

24. templates describe the visual structure of a control

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

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

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

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

29. Templates

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

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

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

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

34. Storyboards and Triggers

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

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

39. Keyword: targeted

40. Targeted Experiences

41. with power comes responsibility

42. HTML The Early Years

43. Font Salad Frankly,

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

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

46. 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 email: robertin@microsoft.com blog: http://www.notstatic.com demo source: http://www.notstatic.com/pdc2005

47. thank you.

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