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 FormsSilverlightWPFDirectX

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

4. 4 rich clients

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

6. XAML Based Development eXtensible Application Markup Language myXaml.xaml Declare a tree objects in XML rather than write code

7. Benefits of declaring UI in XAML Clear separation of UI from code Less (boilerplate) code to write/debug Easy for tools to read/write XML

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. 16 Bit of XAML

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

18. Animation System

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

20. Animation Options Animation Types Double Point Color Thickness String... Animate By Simple Interpolation KeyFrame Linear Spline Discrete Path 05s1s1.7s4s Transforms Rotate Translate Scale Skew Matrix Transforms Rotate Translate Scale Skew Matrix

21. 21 animations & triggers

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

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. 25 Data Binding

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. 32 styles and resources

33. Controls – Silverlight “in the box” ButtonCalendarCheckboxComboboxDataGridDatePickerGridSplitterImageListBoxMediaElementMultiScaleImagePassword BoxPopupProgressBarRadioButtonScrollBarSliderTabControlTextBlockTextBox

34. Controls – WPF “in the box” ButtonCheckboxComboboxExpanderFlowDocumentReaderGridSplitterImageInkCanvasLabelListBoxListViewMediaElementMenuPasswordBoxPopupProgressBarRadioButtonRichTextBoxScrollBarSliderStatusBarTabControlTextBlockTextBoxToolBarTreeView

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

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 3 rd parties

38. 38 Controls

39. Control Templating Vanilla ControlStyled ControlCreate UserControlTemplated ControlCreate CustomControl FlexibilityFlexibilityComplexityComplexity Click Me! Appearance Behaviour Appearance Set the Control.Template property (ControlTemplate) Typically via a.... Style !

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

41. 41 templating controls

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.