Catching up on Rich Clients Part 1 of 2

1

Catching up on Rich Clients(round 1)

Mike Ormond, Mike TaultyDeveloper & Platform GroupMicrosoft [email protected] [email protected]

Microsoft UI Technologies

Agenda

FoundationsDeclarative Development (XAML)AnimationsDatabindingStylingControlsTemplating

10 More Things...SilverlightWPF

4

rich clients

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/

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

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

Namespaces in the XML map to CLR namespaces

Can be stated in the XMLOr 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 propertyvalues of complex type

Capabilities for populatingcollections

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

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

XAML 101 - Extensibility

Markup extensions(many built in)

Custom classes/controls

XAML 101 - 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 visualMight 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 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 ...

Animation Options

Animation TypesDoublePointColorThicknessString...

Animate BySimple InterpolationKeyFrame

LinearSplineDiscrete

Path

0 5s1s 1.7s 4s

Transforms Rotate Translate Scale Skew Matrix

21

animations & triggers

Databinding is core

Elements have a DataContextResolution of declarative bindings is done by hierarchically examining an element’s DataContextButtonButton

GridGrid

Databinding is core

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

25

Data Binding

Styles & Resources

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)

Styling a Button

Defining Resources

Dictionary1.xaml

Consuming Resources

StaticResourceEvaluated once when page / window loads

DynamicResourceLazy loadedOngoing evaluation

Implicit KeysEvery resource has a key - not necessarily *explicit*

Some Observations

StyleRe-use, re-use, re-useUsually created in XAMLUsually created as a resource

ResourcesNot just about Styles

32

styles and resources

Controls – Silverlight “in the box”

Controls – WPF “in the box”

Controls – the “Toolkits”

Silverlight Toolkit and WPF Toolkit (CodePlex)

SilverlightSilverlight WPFWPF

you can build your own controls

UserControl for composition of controlsPanel for custom layoutControl for ultimate flexibility incl. templating

or look to 3rd parties

38

Controls

Control Templating

Click Me!Click Me!

AppearanceAppearance BehaviourBehaviourAppearanceAppearance

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.