Catching up on Rich Clients (round 1)

1. Catching up on Rich Clients(round 1) Mike Ormond, Mike Taulty Developer & Platform Group Microsoft Ltd Mike.Ormond@microsoft.com Mike.Taulty@microsoft.com

2. Microsoft UI Technologies • ASP.NET • ASP.NET AJAX • Win Forms • Silverlight • WPF • DirectX

3. Agenda Foundations • Declarative Development (XAML) • Animations • Databinding • Styling • Controls • Templating 10 More Things... • Silverlight • WPF

4. rich clients demo

5. VS2008 Sp1 Express Edition Silverlight Tools Tools Design 2 Blend 2 Sp1 http://www.kaxaml.com/ VS Project Files XAML

6. myXaml.xaml XAML Based Development • eXtensibleApplication MarkupLanguage Declare a tree objects in XML rather than write code

7. Benefits of declaring UI in XAML

8. XAML 101 – XML to .NET XML Elements map to instances of .NET Types XML Attributes map to properties of those instances

9. XAML 101 – XML to .NET • Namespaces in the XML map to CLR namespaces • Can be stated in the XML • Or embedded into the assembly in question

10. XAML 101 – Content Properties Types can have a “default” or “content” property

11. XAML 101 – Conversion/Propeties Properties often need converters “Dotted” syntax for property values of complex type Capabilities for populating collections

12. XAML 101 – Code Behind • Some XAML stands alone • Other XAML needs to be “married” with code at load time • Visual Studio generates code to wire up events at XAML load time

13. XAML 101 – Naming • Code often needs to locate objects created in XAML • Use naming in XAML to achieve this; • Visual Studio uses this to make strongly typed member variables

14. XAML 101 - Extensibility Markup extensions (many built in) Custom classes/controls

15. XAML 101 - XAML is not always UI

16. Bit of XAML demo

17. Animations & Triggers • WPF & Silverlight – a little more general: • Might not be visual • Might not be “movement” animatev. to present a series of images in rapid succession thereby creating the illusion of movement You can animate most properties of objects

18. Animation System

19. Anatomy of an Animation Storyboard Properties BeginTime AutoReverse RepeatBehavior SpeedRatio ... Trigger (or Code) Storyboard Animation Animation Animation Animation Properties BeginTime From / To / By Duration ... Storyboard Animation

20. Animation Options Transforms Rotate Translate Scale Skew Matrix • Animation Types • Double • Point • Color • Thickness • String • ... • Animate By • Simple Interpolation • KeyFrame • Linear • Spline • Discrete • Path 0 1s 1.7s 4s 5s

21. animations & triggers demo

22. Databinding is core • Elements have a DataContext • Resolution of declarative bindings is done by hierarchically examining an element’s DataContext Grid Button

23. Databinding is core

24. Data Binding • Some requirements on underlying bound objects • INotifyPropertyChanged • INotifyCollectionChanged • Also – need to consider DependencyObject and DependencyProperty in some cases • Many options to tweak around binding; • One-way or two-way binding • Validation, Conversion • When to notify of modifications • etc...

25. Data Binding demo

26. Styles & Resources

27. Styles, Resources? • Styles • Styles allow us to collect properties in one place and apply them to many elements • Resources • Simple way to reuse commonly defined objects and values • FrameworkElement class properties: • .Style (as Style) • .Resources (as ResourceDictionary)

28. Styling a Button

29. Defining Resources Dictionary1.xaml

30. Consuming Resources • StaticResource • Evaluated once when page / window loads • DynamicResource • Lazy loaded • Ongoing evaluation • Implicit Keys • Every resource has a key - not necessarily *explicit*

31. Some Observations • Style • Re-use, re-use, re-use • Usually created in XAML • Usually created as a resource • Resources • Not just about Styles

32. styles and resources demo

33. Controls – Silverlight “in the box”

34. Controls – WPF “in the box”

35. Controls – the “Toolkits” • Silverlight Toolkit and WPF Toolkit (CodePlex) WPF Silverlight

36. you can build your own controls • UserControl for composition of controls • Panel for custom layout • Control for ultimate flexibility incl. templating

37. or look to 3rd parties

38. Controls demo

39. Control Templating Flexibility Complexity Click Me! Appearance Appearance Behaviour • Set the Control.Template property (ControlTemplate) • Typically via a .... Style !

40. Data Template • Allows me to define data’s visual representation

41. templating controls demo

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