Introduction To WPF/e - Microsoft

viraginitysplashInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

274 εμφανίσεις

Sascha P. Corti

Microsoft Switzerland

sascha.corti@microsoft.com

http://www.corti.com/weblogsascha

http://twitter.com/techpreacher


Microsoft
Silverlight

is a

cross
-
browser,

cross
-
platform

plug
-
in


for delivering

the next generation of

.NET
-
based


media experiences

&

rich interactive applications (RIAs)


for the

Web

web

desktop

media & RIA

web

desktop

Silverlight Installation Experience

Microsoft & Competitive Development Technologies

Desktop

Media

& RIA

Web

Cross Browser

& Platform

Linux

JSP / PHP

ColdFusion

LAMP

AJAX
Libraries

“Apollo”

Mac OS

Flash
&

Flex

Quicktime

& Others

Microsoft

Others

Server Vista

Developers, Designers & Apps by category

Desktop

Media

& RIA

Web

200
-
400k

4
-
6m

?

4
-
5m

1.5m

Developers

Designers

Applications

>1m

>100k

>10ks

Developer skills
today =

Web & Desktop

Enterprise UX

of tomorrow =

consumer UX of today?

Media & RIA

= emerging

Bridging the
Gap between

Designer & Developer Tooling

Desktop

Media

& RIA

Web

Designer

Look, behavior, brand,

and emotional connection

Developer

Function, deployment, data,

security, operational integrity

Server Vista

C++

C#

VB.NET

Paper

JPG / TIFF

PSD

PPT

MOV / WMV


Non Standards

‘Dirty Code’

Mockups

Design vs. Development

Designer


Expression

Developer


Visual Studio

Design & Development

Designer


Expression

Developer


Visual Studio

XHTML

CSS / XSLT

XML

ASP.NET

Javascript

AJAX

Design & Development

Designer


Expression

Developer


Visual Studio

XHTML

CSS / XSLT

XML

ASP.NET

Javascript

AJAX

Silverlight

in Action

Primetime Emmys

Fox HD


Tafiti

Search

Silverlight

Airlines


Top Banana

Silverlight

Web Media Ecosystem

Create

Distribute

Experience

Expression Media
Encoder
for publishing
with Silverlight

Expression Blend
for
creating media
experiences

+ Existing ecosystem of
WMV technology partners
/ solution providers

Up to 2x streaming
scalability
over

Windows
Server 2003

New Secure
content
delivery
over SSL and
Cache/Proxy support

New
IIS7 Media Pack
with
bit
-
rate throttling for lower
cost
for downloaded
media

Interactivity, video, and
animation in browser
and/or full
screen

Seamless, Fast
Installation for End Users

Consistent experience on
Mac and Windows

Silverlight Media Features


Self
-
contained media playback


Non
-
rectangular, semi
-
transparent

video with overlays


Customizable transport controls


Progressive download and Windows

Media Services support


Live and on demand streaming


Silverlight Media Features (cont.)


Media markers / script commands


ASX playlist support


Closed captioning support with
Expression Encoder


Bandwidth throttling with IIS 7.0


Alpha video (v1.1)


Content protection (v1.1)


Silverlight Media Formats


The following file formats are accepted
by the
MediaElement

(regardless of the
file extension):


Video: WMV v7, v8, v9, VC
-
1


Audio: WMA v7, v8, v9 (standard), MP3

Building a

Silverlight Media Application

Silverlight Streaming

http://silverlight.live.com

Provides developers a free, scalability
-
on
-
demand solution
for Silverlight

Silverlight

Streaming Infrastructure

Silverlight

streaming infrastructure

Data flow
Silverlight

Data flow user

Content upload

Silverlight Streaming Services

Silverlight 1.0

2D Graphics

Animations

Input (mouse, keyboard, ink)

Media (WMV, WMA, MP3)

Imaging (JPEG, PNG)

Text

HTTP Downloader

XAML Parser

JavaScript DOM

Silverlight JavaScript Basics


Silverlight
XAML elements
are
scriptable via
the browser script engine (JavaScript)


Scriptable objects are obtained via
findName


Scriptable objects (elements) can be controlled via
properties a
nd

methods


Models JavaScript and HTML DOM interaction


findName is equivalent to
document.getElementById()


Supports tree walking via children collection


Position set using "Canvas.Top" and
"Canvas.Left"


Size can be scaled or set via Height/Width

Graphics and Animations in Silverlight


2D Graphics


Standard shapes, masking and clipping


Transformations: skew, rotate, scale, translate,
matrix


Animation Basics


Animations change properties over time


Support linear, discrete and
spline

animation


Animatable

property types:


Double, Color, Point


Animations and graphics are
defined using
XAML

Downloader and CreateFromXAML


HTTP Downloader


V1.0 supports HTTP gets (async and sync)


Provides download progress


ZIP packaging


Similar to XMLHTTP


CreateFromXAML


Primary
way in V1.0 to dynamically create
content

Extending
Silverlight

Applications

Silverlight 1.0 and 1.1


Silverlight v1.0 (Released)



XAML + JavaScript


Designed for interactive content


Especially video



Released summer 2007


Silverlight v1.1 (Alpha)



XAML +
.Net

languages (C#, VB,
JavaScript, etc.)



Designed for rich interactive apps


Will release Q2
-

Q3 2008

Silverlight Architecture

Browser Host

Integrated
Networking
Stack

DOM
Integration

Installer

JavaScript
Engine

Presentation Core

.NET for Silverlight

Inputs

Keyboard

Mouse

Ink

Media

WMV / VC1

WMA

MP3

Controls

Layout

Editing

UI Core

2D Vectors

Animation

Text

Images

Transforms

DRM

Media

Dynamic Languages

Ruby

Python

BCL

Generics

Collections

Web Services

REST

RSS

SOAP

POX

JSON

Data

LINQ

LINQ
-
to
-
XML

WPF for Silverlight

Extensible
Controls

Common Language Runtime (Execution Engine)

ASP.NET
AJAX
Libs

<
asp:xaml
>

<
asp:media
>

Server

Silverlight 1.0

Silverlight 1.1

Legend

XAML

1.1 (alpha)

1.1 (planned)

WPF

Button

Sample

Yes

Yes

TextBox

No

Yes

Yes

Scrollbar

Sample

Yes

Yes

Slider

Sample

Yes

Yes

ListBox

Sample

Yes

Yes

CheckBox

No

Yes

Yes

RadioButton

No

Yes

Yes

ComboBox

No

Yes

Yes

TreeView

No

No

Yes

RichTextBox

No

No

Yes

DataGrid

No

No

3
rd

party

UserControl

Yes

Yes

Yes

Feature Plans: Controls

1.1 (alpha)

1.1 (planned)

WPF

Canvas

Yes

Yes

Yes

Grid

No

Yes

Yes

StackPanel

No

Yes

Yes

ViewBox

No

Yes

Yes

Feature Plans: Layout

1.1 (alpha)

1.1 (planned)

WPF

Mouse events

Partial

Yes

Yes

Keyboard events

Partial

Yes

Yes

Resource
dictionary

Partial

Yes

Yes

Data binding

No

Yes

Yes

Styling

No

Yes

Yes

3D vector graphics

No

No

Yes

GPU h/w
accel
.

No

No

Yes

Out of browser

No

No

Yes

Offline

No

No

Yes

Cross
-
platform

Yes

Yes

No

Feature Plans: Other

SilverVideo
-
Site Sample

Silverlight

1.0 and
Silverlight

1.1

Controls in
Silverlight

1.0

Jelly Controls

Netikatech

GOA Controls

UI Technologies Compared

WPF

Browser
Plugin

“Browser”/
js

lib.

.NET 3.0

(Vista, XP, WS2003)

Any

(Modern)

Browser

IE/
FireFox

(Vista, XP, WS2003)

Safari/
FireFox

(Mac OS X 10.4.8+)



XAML

.NET3.0

XAML ↔ JS
*

XAML ↔ .NET
**


XML

JavaScript

3D, 2D, Video,
Vector Graphic,
GPU, Picture,
Music,…

2D, wmv
-
wma
-
mp3, Vector
Graphic, “no
black
-
box”

Remove
flickering, allow
partial roundtrip

Reach

User Experience (Fidelity)

*

Silverlight 1.0

**

Silverlight 1.1

Silverlight.net


Silverlight Samples
and Showcases


Getting Started
section


Quickstarts
,

Whitepapers &
Videos



http://nibblestutorials.net


NibblesTutorials.net


Expression Blend &
Silverlight Tutorials


Expression Blend &
WPF Tutorials


Samples Download



http://nibblestutorials.net


Links


Silverlight


http://silverlight.net/


Silverlight

Streaming


http://streaming.live.com/


Tafiti

Search


http://www.tafiti.com/



JellyGraph

(free) Data Controls


http://joestegman.members.winisp.net/jelly/


NETIKAtech

GOA
Silverlight

Controls


http://community.netikatech.com/demos/


Infragistics

Data Controls


http://labs.infragistics.com/silverlight/


Photosynth


http://labs.live.com/photosynth


SeaDragon

Demo auf YouTube


http://www.youtube.com/watch?v=0ra5tp7K
--
I


©
2007 Microsoft
Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademar
ks
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
dat
e 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 accu
rac
y 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.