Windows Presentation Foundation ("Avalon"): Beautiful Code, Beautiful Design - Applications Your Designers Can

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. powerfulvisual and interactive capabilities cleanseparation of UI and logic great toolsfor developers and designers

9. PhotoStore Basic UI

10. developer / designer workflow

11. Designer DetailsLost 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. projectstructure Window1.xaml.cs Contains: Application logic Created by: Application developer Window1.xaml Contains: Principal UI (controls, layout, etc.) Created by: Application developer or designer Design Experience: By hand or using a visual tool Styles.xaml Contains: Application “style” (visual description of UI elements) Created by: Application designer Design Experience: By hand or using a visual tool Data model, event names, element names, etc. Resource names and element types.

16. PhotoStore Project

17. styling is… resources styles templates triggers storyboards

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 <Style x:Key=“MyStyle” TargetType=“{x:Type Button}”> </Style> Styled Button

20. style drilldown lookup key can be a name or a type <Style TargetType=“{x:Type Button}”> </Style> Styled Button

21. style drilldown use <Setter> to set properties onthe styled element <Style x:Key=“MyStyle” TargetType=“{x:Type Button}”> <Setter Property=“Background” Value=“Green” /> </Style> Styled Button

22. style drilldown styles can be based on other styles <Style x:Key=“BaseStyle” > <Setter Property=“Foreground” Value=“Orange” /> </Style> <Style x:Key=“MyStyle”BasedOn=“{StaticResource BaseStyle}” /> <Setter Property=“Background” Value=“Green” /> </Style> Styled Button

23. Styles and Resources

24. templates describe the visual structureof a control

25. template drilldown control introduces the Template propertywhich defines the control’s structure and appearance <Button Template=“{StaticResource MyButton}” />

26. template drilldown use composition to describe the control’s visual tree <ControlTemplate x:Key=“MyButton” TargetType=“{x:Type Button}”> <Grid> <Ellipse /> <ContentPresenter /> </Grid> </ControlTemplate> <Button Template=“{StaticResource MyButton}” /> TemplatedButton

27. template drilldown use contract elements to ensure correct functionality <ControlTemplate x:Key=“MyButton” TargetType=“{x:Type Button}”> <Grid> <Ellipse /> <ContentPresenter /> </Grid> </ControlTemplate> <Button Template=“{StaticResource MyButton}” /> TemplatedButton

28. template drilldown use <DataTemplates> to define a visualrepresentation of a data object <DataTemplate DataType=“{x:Type PhotoObject}”> <Image Source=“{Binding FileName}” /> </ControlTemplate>

29. Templates

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

31. triggers and storyboards drilldown triggers are activated when a specified condition becomes true <Trigger Property=“IsMouseOver” Value=“true”> </Trigger>

32. triggers and storyboards drilldown define “triggered”property changes using <Setter> (the previous state gets cached) <Trigger Property=“IsMouseOver” Value=“true”> <Setter Property=“Background” Value=“Orange” /> </Trigger> Styled Button

33. triggers and storyboards drilldown use storyboards with <EventTrigger> to add dynamic animations <EventTrigger RoutedEvent=“Mouse.Enter”> <Storyboard TargetProperty=“MaxWidth”> <DoubleAnimation Duration=“0:0:1” To=“150” /> </Storyboard> </EventTrigger> Styled Button

34. Storyboards and Triggers

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

38. targeted experiences Window1.xaml.cs Contains: Application logic Created by: Application developer Window1.xaml ProfessionalVersion Window1.xaml ConsumerVersion Window1.xaml MCEVersion

39. Keyword: targeted

40. Targeted Experiences

41. with power comes responsibility

42. HTML The Early Years

43. Font Salad WordArt Frankly, didn't help

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

45. Good design means that beauty andusability 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.