catching up on rich clients part 1 of 2
DESCRIPTION
Catching up on Rich Clients Part 1 of 2TRANSCRIPT
![Page 1: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/1.jpg)
1
Catching up on Rich Clients(round 1)
Mike Ormond, Mike TaultyDeveloper & Platform GroupMicrosoft [email protected] [email protected]
![Page 2: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/2.jpg)
Microsoft UI Technologies
![Page 3: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/3.jpg)
Agenda
FoundationsDeclarative Development (XAML)AnimationsDatabindingStylingControlsTemplating
10 More Things...SilverlightWPF
![Page 4: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/4.jpg)
4
rich clients
![Page 5: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/5.jpg)
XAMLXAML
VS Project FilesVS Project Files
Tools VS2008 Sp1Express EditionSilverlight Tools
VS2008 Sp1Express EditionSilverlight ToolsBlend 2 Sp1Blend 2 Sp1Design 2Design 2
http://www.kaxaml.com/
![Page 6: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/6.jpg)
XAML Based Development
eXtensible Application Markup Language
myXaml.xaml
Declare a tree objects in XML rather than write codeDeclare a tree objects in XML rather than write code
![Page 7: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/7.jpg)
Benefits of declaring UI in XAML
![Page 8: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/8.jpg)
XAML 101 – XML to .NET
XML Elements map to instances of .NET Types
XML Attributes map to properties of those instances
![Page 9: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/9.jpg)
XAML 101 – XML to .NET
Namespaces in the XML map to CLR namespaces
Can be stated in the XMLOr embedded into the assembly in question
![Page 10: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/10.jpg)
XAML 101 – Content Properties
Types can have a “default” or “content” property
![Page 11: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/11.jpg)
XAML 101 – Conversion/Propeties Properties often need
converters
“Dotted” syntax for propertyvalues of complex type
Capabilities for populatingcollections
![Page 12: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/12.jpg)
XAML 101 – Code Behind
Some XAML stands aloneOther XAML needs to be “married” with code at load time
Visual Studio generates code to wire up events at XAML load time
![Page 13: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/13.jpg)
XAML 101 – Naming
Code often needs to locate objects created in XAMLUse naming in XAML to achieve this;
Visual Studio uses this to make strongly typed member variables
![Page 14: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/14.jpg)
XAML 101 - Extensibility
Markup extensions(many built in)
Custom classes/controls
![Page 15: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/15.jpg)
XAML 101 - XAML is not always UI
![Page 16: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/16.jpg)
16
Bit of XAML
![Page 17: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/17.jpg)
You can animate most properties of objects
WPF & Silverlight – a little more general:Might not be visualMight not be “movement”
Animations & Triggers
animate v. to present a series of images in rapid succession thereby creating the illusion of movement
![Page 18: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/18.jpg)
Animation System
![Page 19: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/19.jpg)
Anatomy of an AnimationTrigger (or Code)Trigger (or Code)
StoryboardStoryboard
AnimationAnimation
StoryboardStoryboard
AnimationAnimation
AnimationAnimation
AnimationAnimation
Storyboard Properties BeginTime AutoReverse RepeatBehavior SpeedRatio ...
Animation Properties BeginTime From / To / By Duration ...
![Page 20: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/20.jpg)
Animation Options
Animation TypesDoublePointColorThicknessString...
Animate BySimple InterpolationKeyFrame
LinearSplineDiscrete
Path
0 5s1s 1.7s 4s
Transforms Rotate Translate Scale Skew Matrix
![Page 21: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/21.jpg)
21
animations & triggers
![Page 22: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/22.jpg)
Databinding is core
Elements have a DataContextResolution of declarative bindings is done by hierarchically examining an element’s DataContextButtonButton
GridGrid
![Page 23: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/23.jpg)
Databinding is core
![Page 24: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/24.jpg)
Data Binding
Some requirements on underlying bound objects
INotifyPropertyChangedINotifyCollectionChangedAlso – need to consider DependencyObject and DependencyProperty in some cases
Many options to tweak around binding;One-way or two-way bindingValidation, ConversionWhen to notify of modificationsetc...
![Page 25: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/25.jpg)
25
Data Binding
![Page 26: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/26.jpg)
Styles & Resources
![Page 27: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/27.jpg)
Styles, Resources?
StylesStyles allow us to collect properties in one place and apply them to many elements
ResourcesSimple way to reuse commonly defined objects and values
FrameworkElement class properties:.Style (as Style).Resources (as ResourceDictionary)
![Page 28: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/28.jpg)
Styling a Button
![Page 29: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/29.jpg)
Defining Resources
Dictionary1.xaml
![Page 30: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/30.jpg)
Consuming Resources
StaticResourceEvaluated once when page / window loads
DynamicResourceLazy loadedOngoing evaluation
Implicit KeysEvery resource has a key - not necessarily *explicit*
![Page 31: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/31.jpg)
Some Observations
StyleRe-use, re-use, re-useUsually created in XAMLUsually created as a resource
ResourcesNot just about Styles
![Page 32: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/32.jpg)
32
styles and resources
![Page 33: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/33.jpg)
Controls – Silverlight “in the box”
![Page 34: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/34.jpg)
Controls – WPF “in the box”
![Page 35: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/35.jpg)
Controls – the “Toolkits”
Silverlight Toolkit and WPF Toolkit (CodePlex)
SilverlightSilverlight WPFWPF
![Page 36: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/36.jpg)
you can build your own controls
UserControl for composition of controlsPanel for custom layoutControl for ultimate flexibility incl. templating
![Page 37: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/37.jpg)
or look to 3rd parties
![Page 38: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/38.jpg)
38
Controls
![Page 39: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/39.jpg)
Control Templating
Click Me!Click Me!
AppearanceAppearance BehaviourBehaviourAppearanceAppearance
Set the Control.Template property (ControlTemplate)Typically via a .... Style !
![Page 40: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/40.jpg)
Data Template
Allows me to define data’s visual representation
![Page 41: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/41.jpg)
41
templating controls
![Page 42: Catching up on Rich Clients Part 1 of 2](https://reader036.vdocuments.us/reader036/viewer/2022062513/55589e9cd8b42a2a738b4c5f/html5/thumbnails/42.jpg)
© 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.