silverlight 4

1

Supote Phunsakul Microsoft MVP Twitter @SoftEngine http://codetoday.net http://on.fb.me/silverlightth

Silverlight

2

But first the Big Picture… ".NET At The Core”

3

What Is User Experience?

4

Designer-Developer Productivity

Designers design Developers add business logic

5

Designer-Developer Productivity

• Microsoft Tools for Designer & Developers

• Declarative Programming through XAML

• Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)

Designers design

With XAML designers &

developers can streamline

their collaboration

Developers add business logic

6

Declarative Programming Through XAML

XAML = Extensive Application Markup Language • Easily toolable, declarative markup • Code and content are separate • Can be rendered in the browser / standalone application

Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100;

C# Dim b1 As New Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100

VB.NET <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button>

XAML

7

What’s Silverlight?

Cross-browser, Cross-platform Technology.

Lightweight download.

Provides a rich model for 2D & 3D drawing.

Including buttons, text boxes, lists, grid and etc.

Have a time-based animation model.

Provides playback of Media Audio, Video.

Includes a scaled-down version of the CLR.

8

What’s Silverlight?

Cross-Browser Cross-Platform

Media Experiences

Rich Interactive Applications

Plugin

9

Silverlight and Flash RIA – Rich Internet Application

VS.

10

History of Silverlight

Silverlight 1.0 Beta

Silverlight 1.1 Alpha

Silverlight 1.0 Silverlight 2 Beta

Silverlight 3 Beta Silverlight 3 Silverlight 4 Beta

Silverlight 2

Silverlight 4

MIX 07 Sep 07 MIX 08

MIX 09 Jul 09 PDC 09

Oct 08

March 10

11

Tools for { Developer }

http://www.microsoft.com/express/download/

Microsoft Silverlight 4 Tools

2010

12

Tools for { Designer }

Expression Studio 4.0 http://www.microsoft.com/expression

13

How to Develop Silverlight?

Designer/Video Editor

Designers

Developer

Developers

UX/Interactive Designer

Visual Designer

VS Project

CSS

XHTML

JavaScript

14

Silverlight 5 Beta Feature

15

Multi-Column Linked Text

Character Spacing

Windows

Click Count

Binding in style setters

Ancestor RelativeSource

Custom Markup Extensions

XAML binding debugging

Implicit data templates

3D

16

Multi-Column and Linked Text

Flow text from RichTextBox to RichTextBoxOverflow

Link as many as you want

Flow around other elements

Selection works across elements

17

Character Spacing

For text-heavy layout, headlines

Control spacing

between characters (Tracking)

between lines

Character Spacing expressed as 1/1000 of font size

Set on anything derived from Control or TextElement

18

Text Awesomeness

19


Character Spacing

Windows

Click Count






3D

20

Operating System Windows Before

Use the Popup and ChildWindow classes

Constrained to Silverlight drawing surface

No multi-display support

Silverlight 5

Popup and ChildWindow still supported

Enhanced WindowClass for real OS Windows

21

Native OS Windows

22


Character Spacing

Windows

Click Count






3D

23

ClickCount

Unlimited click count (double, triple, etc)

Multi-click gestures are common MS Word uses double-click to select word, triple click to select paragraph

Safari 3, Firefox 3, & IE7: triple click selects all text within an element

Silverlight Implementation Supports 1 to n clicks

Some tricks required if you want both n and n+x clicks

24

Double-Click

25


Character Spacing

Windows

Click Count






3D

26

Binding in Style Setters

Style setters can now be data bound

Change the source object’s values and the styles change

Source Object

Style View

View

View

27

Binding in Style Setters

28


Character Spacing

Windows

Click Count






3D

29

RelativeSource FindAncestor

Access elements in the visual tree outside of a template

Know exactly how many parents to traverse? AncestorLevel

Common example: ComboBox in a ListBox ‘s ItemTemplate

ComboBox ‘s ItemsSource needs to access DataContext outside the ItemTemplate

30


DataContext ViewModel

DataContext Book

ItemsSource needs ViewModel.Deals!

31


32


Character Spacing

Windows

Click Count






3D

33


Run your own code from custom markup attributes

When you want to extend XAML

34


35


Character Spacing

Windows

Click Count






3D

36

Data Binding Debugging

Set breakpoints in XAML on bindings

Hit breakpoints at runtime just as you would with code

Use conditional breakpoints

Inspect values, sources, errors etc.

Walk into Converter code

37

Data Binding Debugging … in XAML !

38


Character Spacing

Windows

Click Count






3D

39

Implicit Data Templates

Like regular data templates, but … implicit Does for templates what implicit styles did for styles

Like implicit styles, tied to a data type Classes/Structs, not interfaces

Use in any content control or items control Reuse chunks of UI throughout application - automatically

40

Regular (Explicit) Data Templates

class Tweet : TimelineItem {…} class DirectMessage : TimelineItem {…} class Notification : TimelineItem {…} … TimelineItem[] items = new TimelineItems[] { new Tweet(“Pete Brown”, “pete.png”, “…”), new Tweet(“Jon Galloway”, “jon.png” , “…”), new Tweet(“Joe Stagner”, “joe.png” , “…”), new Tweet(“Jesse Liberty”, “jesse.png” , “…”) };

Data DataTemplate

Pete Brown

Jesse Liberty

Joe Stagner

Jon Galloway

Resulting Presentation

41

New Implicit Data Templates

class Tweet : TimelineItem {…} class DirectMessage : TimelineItem {…} class Notification : TimelineItem {…} … TimelineItem[] items = new TimelineItems[] { new Tweet(“Pete Brown”, “pete.png”, “…”), new Tweet(“Jon Galloway”, “jon.png” , “…”), new DirectMessage(“Joe Stagner”, “joe.png” , “…”), new Notification(“Jesse Liberty”, “jesse.png” , “…”) };

Data Implicit Data Templates

Pete Brown

Jesse Liberty

Joe Stagner

Jon Galloway

Resulting Presentation

Tweet

DirectMessage

Notification

42

Implicit Data Templates

43


Character Spacing

Windows

Click Count






3D

44

3D

Why 3D Microsoft’s continued commitment to enhancing Silverlight and serving the needs of .NET developers

A top request from our customers (ranked 3rd on user voice)

A leap forward in terms of visualizations, performance, and interactivity

Modern devices are 3D ready

Based on XNA

Features to be split between runtime and SDK libraries

46

Target Applications

Data visualization*

3D charts and reports

Scatter points

Geographic overlays

Science & astronomy

Education & training

Marketing & advertising

Business*

Manufacturing

Industrial processes

Home design

Realty & virtual tours

Customer support

Medical

Games & simulation * Enterprise focus for Silverlight 5

47

3D

48

Also Coming Post-Beta

P/Invoke

64 bit Support

PivotViewer

XAML Visuals

Trick Play for Video/Audio

Lots of additional 3D features Anti-aliasing, render target textures, more

Vector-based printing

More

49

What Next?

Silverlight 5 to ship by the end of the calendar year

Silverlight 5 beta available now Visit http://silverlight.net

Build awesome stuff!

http://silverlight.net/

silverlight 4

Education

xaml xaml

beta silverlight

linked text flow text

microsoft silverlight

whats silverlight

custom markup attributes

custom markup extensions34

multiclick gestures