Catching up on Rich Clients (round 1) Mike Ormond, Mike Taulty Developer & Platform Group Microsoft Ltd [email_address]   ...
Microsoft UI Technologies
Agenda <ul><li>Foundations </li></ul><ul><li>Declarative Development (XAML) </li></ul><ul><li>Animations </li></ul><ul><li...
rich clients
Tools VS2008 Sp1 Express Edition Silverlight Tools Blend 2 Sp1 Design 2 XAML VS Project Files http://www.kaxaml.com/
XAML Based Development <ul><li>e X tensible  A pplication  M arkup  L anguage </li></ul>myXaml.xaml Declare a tree objects...
Benefits of declaring UI in XAML
XAML 101 – XML to .NET XML Elements map to instances of .NET Types XML Attributes map to properties of those instances
XAML 101 – XML to .NET <ul><li>Namespaces in the XML map to CLR namespaces </li></ul><ul><ul><li>Can be stated in the XML ...
XAML 101 – Content Properties Types can have a “default” or “content” property
XAML 101 – Conversion/Propeties Properties often need converters “ Dotted” syntax for property values of complex type Capa...
XAML 101 – Code Behind <ul><li>Some XAML stands alone </li></ul><ul><li>Other XAML needs to be “married” with code at load...
XAML 101 – Naming <ul><li>Code often needs to locate objects created in XAML </li></ul><ul><li>Use naming in XAML to achie...
XAML 101 - Extensibility Markup extensions (many built in) Custom classes/controls
XAML 101 - XAML is not always UI
Bit of XAML
<ul><li>WPF & Silverlight – a little more general: </li></ul><ul><ul><li>Might not be visual </li></ul></ul><ul><ul><li>Mi...
Animation System
Anatomy of an Animation Trigger (or Code) Storyboard Animation Storyboard Animation Animation Animation Storyboard Propert...
Animation Options <ul><li>Animation Types </li></ul><ul><ul><li>Double </li></ul></ul><ul><ul><li>Point </li></ul></ul><ul...
animations & triggers
Databinding is  core <ul><li>Elements have a  DataContext </li></ul><ul><li>Resolution of declarative bindings is done by ...
Databinding is  core
Data Binding <ul><li>Some requirements on underlying bound objects </li></ul><ul><ul><li>INotifyPropertyChanged </li></ul>...
Data Binding
Styles & Resources
Styles, Resources? <ul><li>Styles </li></ul><ul><ul><li>Styles allow us to collect properties in one place and apply them ...
Styling a Button
Defining Resources Dictionary1.xaml
Consuming Resources <ul><li>StaticResource </li></ul><ul><ul><li>Evaluated once when page / window loads </li></ul></ul><u...
Some Observations <ul><li>Style </li></ul><ul><ul><li>Re-use, re-use, re-use </li></ul></ul><ul><ul><li>Usually created in...
styles and resources
Controls – Silverlight “in the box”
Controls – WPF “in the box”
Controls – the “Toolkits” <ul><li>Silverlight Toolkit and WPF Toolkit (CodePlex) </li></ul>Silverlight WPF
you can build your own controls <ul><li>UserControl  for composition of controls </li></ul><ul><li>Panel  for custom layou...
or look to 3 rd  parties
Controls
Control Templating Appearance Behaviour Appearance <ul><li>Set the Control.Template property (ControlTemplate) </li></ul><...
Data Template <ul><li>Allows me to define data’s visual representation </li></ul>
templating controls
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Catching up on Rich Clients Part 1 of 2

1,499

Published on

Catching up on Rich Clients Part 1 of 2

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,499
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
71
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 06/07/09 17:04 © 2007 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.
  • Catching up on Rich Clients Part 1 of 2

    1. 1. Catching up on Rich Clients (round 1) Mike Ormond, Mike Taulty Developer & Platform Group Microsoft Ltd [email_address] [email_address]
    2. 2. Microsoft UI Technologies
    3. 3. Agenda <ul><li>Foundations </li></ul><ul><li>Declarative Development (XAML) </li></ul><ul><li>Animations </li></ul><ul><li>Databinding </li></ul><ul><li>Styling </li></ul><ul><li>Controls </li></ul><ul><li>Templating </li></ul><ul><li>10 More Things... </li></ul><ul><li>Silverlight </li></ul><ul><li>WPF </li></ul>
    4. 4. rich clients
    5. 5. Tools VS2008 Sp1 Express Edition Silverlight Tools Blend 2 Sp1 Design 2 XAML VS Project Files http://www.kaxaml.com/
    6. 6. XAML Based Development <ul><li>e X tensible A pplication M arkup L anguage </li></ul>myXaml.xaml Declare a tree objects in XML rather than write code
    7. 7. Benefits of declaring UI in XAML
    8. 8. XAML 101 – XML to .NET XML Elements map to instances of .NET Types XML Attributes map to properties of those instances
    9. 9. XAML 101 – XML to .NET <ul><li>Namespaces in the XML map to CLR namespaces </li></ul><ul><ul><li>Can be stated in the XML </li></ul></ul><ul><ul><li>Or embedded into the assembly in question </li></ul></ul>
    10. 10. XAML 101 – Content Properties Types can have a “default” or “content” property
    11. 11. XAML 101 – Conversion/Propeties Properties often need converters “ Dotted” syntax for property values of complex type Capabilities for populating collections
    12. 12. XAML 101 – Code Behind <ul><li>Some XAML stands alone </li></ul><ul><li>Other XAML needs to be “married” with code at load time </li></ul><ul><li>Visual Studio generates code to wire up events at XAML load time </li></ul>
    13. 13. XAML 101 – Naming <ul><li>Code often needs to locate objects created in XAML </li></ul><ul><li>Use naming in XAML to achieve this; </li></ul><ul><li>Visual Studio uses this to make strongly typed member variables </li></ul>
    14. 14. XAML 101 - Extensibility Markup extensions (many built in) Custom classes/controls
    15. 15. XAML 101 - XAML is not always UI
    16. 16. Bit of XAML
    17. 17. <ul><li>WPF & Silverlight – a little more general: </li></ul><ul><ul><li>Might not be visual </li></ul></ul><ul><ul><li>Might not be “movement” </li></ul></ul>Animations & Triggers You can animate most properties of objects animate v. to present a series of images in rapid succession thereby creating the illusion of movement
    18. 18. Animation System
    19. 19. Anatomy of an Animation Trigger (or Code) Storyboard Animation Storyboard Animation Animation Animation Storyboard Properties BeginTime AutoReverse RepeatBehavior SpeedRatio ... Animation Properties BeginTime From / To / By Duration ...
    20. 20. Animation Options <ul><li>Animation Types </li></ul><ul><ul><li>Double </li></ul></ul><ul><ul><li>Point </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Thickness </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Animate By </li></ul><ul><ul><li>Simple Interpolation </li></ul></ul><ul><ul><li>KeyFrame </li></ul></ul><ul><ul><ul><li>Linear </li></ul></ul></ul><ul><ul><ul><li>Spline </li></ul></ul></ul><ul><ul><ul><li>Discrete </li></ul></ul></ul><ul><ul><li>Path </li></ul></ul>0 5s 1s 1.7s 4s Transforms Rotate Translate Scale Skew Matrix
    21. 21. animations & triggers
    22. 22. Databinding is core <ul><li>Elements have a DataContext </li></ul><ul><li>Resolution of declarative bindings is done by hierarchically examining an element’s DataContext </li></ul>Button Grid
    23. 23. Databinding is core
    24. 24. Data Binding <ul><li>Some requirements on underlying bound objects </li></ul><ul><ul><li>INotifyPropertyChanged </li></ul></ul><ul><ul><li>INotifyCollectionChanged </li></ul></ul><ul><ul><li>Also – need to consider DependencyObject and DependencyProperty in some cases </li></ul></ul><ul><li>Many options to tweak around binding; </li></ul><ul><ul><li>One-way or two-way binding </li></ul></ul><ul><ul><li>Validation, Conversion </li></ul></ul><ul><ul><li>When to notify of modifications </li></ul></ul><ul><ul><li>etc... </li></ul></ul>
    25. 25. Data Binding
    26. 26. Styles & Resources
    27. 27. Styles, Resources? <ul><li>Styles </li></ul><ul><ul><li>Styles allow us to collect properties in one place and apply them to many elements </li></ul></ul><ul><li>Resources </li></ul><ul><ul><li>Simple way to reuse commonly defined objects and values </li></ul></ul><ul><li>FrameworkElement class properties: </li></ul><ul><ul><li>.Style (as Style) </li></ul></ul><ul><ul><li>.Resources (as ResourceDictionary) </li></ul></ul>
    28. 28. Styling a Button
    29. 29. Defining Resources Dictionary1.xaml
    30. 30. Consuming Resources <ul><li>StaticResource </li></ul><ul><ul><li>Evaluated once when page / window loads </li></ul></ul><ul><li>DynamicResource </li></ul><ul><ul><li>Lazy loaded </li></ul></ul><ul><ul><li>Ongoing evaluation </li></ul></ul><ul><li>Implicit Keys </li></ul><ul><ul><li>Every resource has a key - not necessarily *explicit* </li></ul></ul>
    31. 31. Some Observations <ul><li>Style </li></ul><ul><ul><li>Re-use, re-use, re-use </li></ul></ul><ul><ul><li>Usually created in XAML </li></ul></ul><ul><ul><li>Usually created as a resource </li></ul></ul><ul><li>Resources </li></ul><ul><ul><li>Not just about Styles </li></ul></ul>
    32. 32. styles and resources
    33. 33. Controls – Silverlight “in the box”
    34. 34. Controls – WPF “in the box”
    35. 35. Controls – the “Toolkits” <ul><li>Silverlight Toolkit and WPF Toolkit (CodePlex) </li></ul>Silverlight WPF
    36. 36. you can build your own controls <ul><li>UserControl for composition of controls </li></ul><ul><li>Panel for custom layout </li></ul><ul><li>Control for ultimate flexibility incl. templating </li></ul>
    37. 37. or look to 3 rd parties
    38. 38. Controls
    39. 39. Control Templating Appearance Behaviour Appearance <ul><li>Set the Control.Template property (ControlTemplate) </li></ul><ul><li>Typically via a .... Style ! </li></ul>Click Me!
    40. 40. Data Template <ul><li>Allows me to define data’s visual representation </li></ul>
    41. 41. templating controls
    42. 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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×