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

Microsoft UI Technologies ASP.NET ASP.NET AJAX Win FormsSilverlightWPFDirectX

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

4 rich clients

XAMLXAML VS Project Files Tools VS2008 Sp1 Express Edition Silverlight Tools VS2008 Sp1 Express Edition Silverlight Tools Blend 2 Sp1 Design 2

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

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

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 Namespaces in the XML map to CLR namespaces Can be stated in the XML Or embedded into the assembly in question

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 Capabilities for populating collections

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

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

XAML Extensibility Markup extensions (many built in) Custom classes/controls

XAML XAML is not always UI

16 Bit of XAML

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

Animation System

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...

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 animations & triggers

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

Databinding is core

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

Styles & Resources

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)

Styling a Button

Defining Resources Dictionary1.xaml

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

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

Controls – Silverlight “in the box” ButtonCalendarCheckboxComboboxDataGridDatePickerGridSplitterImageListBoxMediaElementMultiScaleImagePassword BoxPopupProgressBarRadioButtonScrollBarSliderTabControlTextBlockTextBox

Controls – WPF “in the box” ButtonCheckboxComboboxExpanderFlowDocumentReaderGridSplitterImageInkCanvasLabelListBoxListViewMediaElementMenuPasswordBoxPopupProgressBarRadioButtonRichTextBoxScrollBarSliderStatusBarTabControlTextBlockTextBoxToolBarTreeView

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

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

or look to 3 rd parties

38 Controls

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

Data Template Allows me to define data’s visual representation

41 templating controls

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