Developing with microsoft silverlight
Download
1 / 65

- PowerPoint PPT Presentation


  • 84 Views
  • Uploaded on

Developing with Microsoft Silverlight. Mark Johnston Developer & Platform Group Microsoft UK April 2007. ? [email protected] www http://blogs.msdn.com/markjo. Agenda. Overview 1.0 and 1.1 releases Scenarios How to build sites that use Silverlight XAML

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - Audrey


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Developing with microsoft silverlight l.jpg

Developing with Microsoft Silverlight

Mark Johnston

Developer & Platform Group

Microsoft UK

April 2007


Slide2 l.jpg

?

[email protected]

www

http://blogs.msdn.com/markjo


Agenda l.jpg
Agenda

  • Overview

    • 1.0 and 1.1 releases

  • Scenarios

  • How to build sites that use Silverlight

    • XAML

    • Graphics, Brushes, Text, Media, Transforms

    • JavaScript Programmability

    • Animation

  • Tools

    • Designer and Developer


Building applications with net l.jpg
Building Applications With .NET

web

web

desktop

desktop

media & RIA


Slide5 l.jpg

  • Microsoft Silverlight

  • is a

  • cross-browser,cross-platformplug-in

  • for delivering

  • the next generation of

  • media experiences

  • &

  • rich interactive applications (RIAs)

  • for theWeb


Silverlight overview l.jpg
Silverlight Overview

  • Enable richer interactive web experiences

    • Vector Graphics, Media, Animation

  • Integrate cleanly within existing sites

    • XML markup with AJAX JavaScript

    • Easily incorporated within HTML pages

  • Cross Browser and Cross Platform

    • Enabled via small, one-time, 1.1Mb download

    • IE, FireFox, Safari support on Windows and Macintosh systems (both Intel and PPC)


A few core silverlight scenarios l.jpg
A few core Silverlight scenarios

  • Media

  • Interactive Content Experiences

  • Rich Internet Applications


Media support l.jpg
Media Support

  • Built-in Audio and Video Codec Support

    • MP3 and WMA Audio

    • WMV video

  • Supports downloading media via standard HTTP requests (works with any web server)

  • Will also support broadcast/live streaming later this spring for webcasts, events, etc.

  • Supports 720 HD video, full screen projection, and best compression in industry


Interactive content experiences l.jpg
Interactive Content Experiences

  • Powerful vector graphics engine

    • Device independent resolution scaling

  • Flexible animation system

    • Enable declarative animation of any element

  • Declarative markup approach enables great tool integration and designer/dev workflow

  • Easy AJAX scripting with JavaScript


Rich internet applications l.jpg
Rich Internet Applications

  • Future: not all features enabled in 1.1 SilverlightAlpha

  • Rich control encapsulation model

    • Databinding

    • Layout managers

    • Built-in common controls

  • .NET Framework programming model for these scenarios




Silverlight 1 0 and 1 1 l.jpg

V1.0

V1.1

Silverlight 1.0 and 1.1

Browser Host

Deploy

  • Friction-Free Installer

  • Auto-Updater

.NET forSilverlight

  • MS Ajax Library

  • DOM Integration

Data

Media

WPF

Extensible Controls

Networking

REST

RSS

SOAP

POX

JSON

DLR

Ruby Python

BCL

Generics Collections

  • Application Services

XAML

Presentation Core

  • Friction-Free Installer

  • Auto-Updater

UI Core

Vector Text

Animation

Images

Inputs

KeyboardMouse Input

DRM

Media

Media

VC-1 WMA MP3

Controls

Layout Editing


Net for silverlight desktop l.jpg
.NET for Silverlight & Desktop

  • .NET for Silverlight is a factored subset of the full .NET

    • Desktop ~ 50 MB (Windows Only)

    • Silverlight + .NET Alpha ~4MB (Cross platform)

    • Additional pieces of .NET available in a pay for play model

  • Same core development framework

    • The shared technologies and APIs are the same

    • The tools are the same

  • Highly compatible

    • Minimal changes needed to move from Silverlight to Desktop

    • However, not binary compatible by default


The sandbox l.jpg
The Sandbox

  • All apps run in Sandbox

    • Conceptually similar to the HTML DOM sandbox

  • Apps run just like HTML pages – just click a URL

    • No elevation prompts

    • No way to get out of the sandbox

  • Includes some additional functionality

    • Safe isolated storage

    • Client based file upload controls

    • Cross-domain support in-work

Microsoft Confidential



How does silverlight work l.jpg
How does Silverlight Work?

  • Silverlight is a browser control within IE and plug-in within FireFox/Safari

  • Silverlight content can be hosted into any container element within an HTML document

  • HTML can be overlaid on top of Silverlight content, enabling easy page blending

  • Silverlight can be programmed using regular browser JavaScript

    • HTML and XAML DOM elements can be manipulated in the same block of code


Silverlight load script l.jpg
Silverlight Load Script

<script type="text/javascript" src="js/aghost.js"></script>

<div id="wpfeControl1Host" >

<script type="text/javascript">

new agHost("wpfeControl1Host", // hostElementID

"wpfeControl1", // ID of the WPF/E control

"400", // Width

"400", // Height

"#00000000", // Background color

null, // SourceElement

"helloworld.xaml", // Source file

"true", // IsWindowless

"30", // MaxFrameRate

null // OnError handler

);

</script>

</div>


What does silverlight point to l.jpg
What does Silverlight Point to?

  • Silverlight load script today points to a .XAML text file to load the XAML content

  • Future option will allow multiple XAML files, images, and media assets to be packaged into a .zip file to optimize download


Xaml rhymes with camel l.jpg
XAML (rhymes with Camel)

  • XAML = eXtensible Application Markup Language

  • Flexible XML document schema

    • Examples: WPF, Silverlight, Workflow Foundation

  • Enables rich tooling support

    • While still preserving good readability and hand-coding within text editors


Xaml sample l.jpg
XAML Sample

  • For example:

<Canvas xmlns="..."

xmlns:x="...">

<Rectangle Width="200" Height="150" Fill="Black" />

<Ellipse Width="200" Height="150" Stroke="Orange" />

</Canvas>



Drawing with xaml l.jpg
Drawing with XAML

  • You can create rich graphics using XAML

    • Device independent vector graphics

    • Scale from low to extremely high DPI devices

  • XAML is made up of Tags

    • Represent a single item or container of the design

      • E.g. Rectangle, Ellipse, Canvas, Storyboard, etc.

    • Not all Tags are design elements – some can also define behavior (e.g. animations) and in the future will define customization (e.g. style and data-binding)


Drawing with xaml 2 l.jpg
Drawing with XAML (2)

  • Basic Vocabulary of Silverlight XAML Elements

    • Canvas

    • Brushes

    • Basic shapes

      • Rectange, Ellipse, Line, Polygon, etc.

    • TextBlock

    • Image


Canvas l.jpg

The Canvas

The Rectangle

Canvas

  • Is a Drawing Surface

  • Children have relative positions:

<Canvas Width="250" Height="200">

<Rectangle Canvas.Top="25" Canvas.Left="25"

Width="200" Height="150" Fill=“Yellow" />

</Canvas>


Canvas 2 l.jpg
Canvas (2)

  • Currently the parent of the every Silverlight XAML document:

  • Note xmlns= usage on root element to indicate document schema

<Canvas xmlns="..."

xmlns:x="...">

<Rectangle Width="200" Height="150" Fill="Black" />

<Ellipse Width="200" Height="150" Stroke="Orange" />

</Canvas>


Canvas 3 l.jpg
Canvas (3)

  • Position relative to first Canvas parent:

<Canvas Background="Light Gray">

<Rectangle Canvas.Top="25" Canvas.Left="25"

Width="200" Height="150" Fill="Black" />

<Canvas Canvas.Top=“50" Canvas.Left="50"

Width="150" Height="100"

Background="Red">

<Ellipse Canvas.Top="25"

Canvas.Left="25"

Width="150"

Height="75"

Fill=“White" />

</Canvas>

</Canvas>


Shapes l.jpg

<Rectangle />

<Ellipse />

<Line />

<Polygon />

<PolyLine />

<Path />

Shapes


Brushes l.jpg
Brushes

  • Determines how objects are painted

    • For painting objects (e.g. Fill)

    • For painting of lines (e.g. Stroke)

    • Brush options include:

      • Solid color brushes

      • Gradient brushes

      • Image brushes


Brushes 2 l.jpg
Brushes (2)

  • <SolidColorBrush />

    • Support creation by name

      • 141 named colors supported (e.g. Blue, Red, Green)

      • Supports #FFFFFF or #FFFFFFFF syntax as well

<Rectangle Width="200" Height="150" >

<Rectangle.Fill>

<SolidColorBrush Color="Black" />

</Rectangle.Fill>

</Rectangle>

<Rectangle Width="200" Height="150" Fill="Black" />

<Rectangle Width="200" Height="150" Fill="#FFFFFF" />


Brushes 3 l.jpg
Brushes (3)

  • <LinearGradientBrush />

    • Start and Stop are to set angle as numbers

    • Gradient Stops are the different color points

<Rectangle Width="200" Height="150">

<Rectangle.Fill>

<LinearGradientBrushStartPoint="0,0" EndPoint="1,1">

<LinearGradientBrush.GradientStops>

<GradientStop Color="Red" Offset="0" />

<GradientStop Color="Black" Offset="1" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>


Brushes 4 l.jpg
Brushes (4)

  • <RadialGradientBrush />

    • Gradient Stops are same syntax as Linear Gradient

<Rectangle Width="200" Height="150" >

<Rectangle.Fill>

<RadialGradientBrush>

<RadialGradientBrush.GradientStops>

<GradientStop Color="Red"

Offset="0" />

<GradientStop Color="Black"

Offset="1" />

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>


Brushes 5 l.jpg
Brushes (5)

  • <ImageBrush />

    • Gradient Stops are same syntax as Linear Gradient

<Ellipse Width="200" Height="75" >

<Ellipse.Fill>

<ImageBrush

ImageSource="http://.../XBox360Logo.jpg" />

</Ellipse.Fill>

</Ellipse>


Using text l.jpg
Using Text

  • <TextBlock />

<TextBlock>Hello</TextBlock>

Hello

<TextBlockFontSize="18">Hello</TextBlock>

Hello

<TextBlock

FontFamily="Courier New">Hello</TextBlock>

Hello

<TextBlock TextWrapping="Wrap" Width="100">

Hello there, how are you?

</TextBlock>

Hello there, how are you?

<TextBlock>

Hello there,<LineBreak/>how are you?

</TextBlock>

Hello there,

how are you?


Using images l.jpg
Using Images

  • <Image />

    • Like ImageBrush

    • But can only place a rectangular image

<Image Width="200" Source="http://.../XBox360Logo.jpg" />


Transformations l.jpg
Transformations

  • Used to make changes to an object

<Rectangle Width="200" Height="100" Fill=“Red">

<Rectangle.RenderTransform>

<RotateTransformCenterX="25" CenterY="100" Angle="45" />

</Rectangle.RenderTransform>

</Rectangle>


Transformations 2 l.jpg
Transformations (2)

  • Power in Transforming Groups of Objects

<Canvas>

<Canvas.RenderTransform>

<RotateTransform Angle="-45" CenterX="50" CenterY="50"/>

</Canvas.RenderTransform>

<Ellipse Width="100" Height="100" Fill="Yellow" />

<Ellipse Canvas.Top="25" Canvas.Left="25"

Width="10" Height="10" Fill="Black" />

<Ellipse Canvas.Top="25" Canvas.Left="65"

Width="10" Height="10" Fill="Black" />

<Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" />

</Canvas>


Transformations 3 l.jpg

Transform Types

<RotateTransform />

Rotation

<ScaleTransform />

Resizes/Stretch

<SkewTransform />

Skews

<TranslateTransform />

Moves

<MatrixTransform />

Scale, Skew and Translate Combined

Transformations (3)


Transformations 4 l.jpg
Transformations (4)

  • <TransformGroup />

    • Allows Grouping of Multiple Transforms

<Canvas>

<Canvas.RenderTransform>

<TransformGroup>

<RotateTransform Angle="-45" CenterX="50" CenterY="50"/>

<ScaleTransformScaleX="1.5" ScaleY="2" />

</TransformGroup>

</Canvas.RenderTransform>

<Ellipse Width="100" Height="100" Fill="Yellow" />

<Ellipse Canvas.Top="25" Canvas.Left="25"

Width="10" Height="10" Fill="Black" />

<Ellipse Canvas.Top="25" Canvas.Left="65"

Width="10" Height="10" Fill="Black" />

</Canvas>


Integrating media l.jpg
Integrating Media

  • <MediaElement />

    • Used to show media (music or video)

      • Control Video with Code

      • No Built-in Controls – You build the UI in XAML

<Canvas xmlns="..."

xmlns:x="...">

<MediaElement Source="xbox.wmv" />

</Canvas>


Naming objects in xaml l.jpg
Naming Objects in XAML

  • XAML objects can be named by adding a x:Name attribute to the element:

  • They can then be referenced by other XAML elements elsewhere in the file

  • Can then be programmed against via code

<Canvas>

<Ellipse x:Name="theCircle" Width="100"

Height="100" Fill="Yellow" />

</Canvas>


Access silverlight via javascript l.jpg
Access Silverlight via JavaScript

  • Use browser’s document.getElementById() to access the Silverlight control on a page:

  • Can also use ASP.NET AJAX $get() function:

var control = document.getElementById("WpfeControl1");

var control = $get("WpfeControl1");


Find xaml object via script l.jpg
Find XAML object via script

  • findName(name) method on Silverlight control

<Canvas xmlns="..."

xmlns:x="...">

<Ellipse x:Name="theCircle" Width="100"

Height="100" Fill="Yellow" />

</Canvas>

varwpfeControl = document.getElementById("WpfeControl1");

vartheCircle = wpfeControl.findName("theCircle");

if (theCircle != null)

theCircle.opacity = .5;


Silverlight events l.jpg
Silverlight Events

  • Standard Events

    • Loaded

    • MouseMove

    • MouseEnter

    • MouseLeave

    • MouseLeftButtonDown

    • MouseLeftButtonUp

  • Use .NET / ASP.NET AJAX event pattern:

  • KeyUp

  • KeyDown

  • GotFocus

  • LostFocus

function onMouseEnter(sender, eventargs) {

sender.Fill = “Red”;

}


Silverlight event example l.jpg
Silverlight Event Example

<Canvas xmlns="..."

xmlns:x="...">

<Ellipse MouseEnter="javascript:onMouseEnter"

MouseLeave="javascript:onMouseLeave"

Height="100" Width="100" Fill="Teal" />

<Ellipse Canvas.Left="120“

MouseEnter="javascript:onMouseEnter"

MouseLeave="javascript:onMouseLeave"

Height="100" Width="100" Fill="Teal" />

</Canvas>

function onMouseEnter(sender) {

sender.Fill = “Coral”;

}

function onMouseLeave(sender) {

sender.Fill = “Teal”;

}



Animating with xaml l.jpg
Animating with XAML

  • Silverlight provides a rich animation system

    • Animations can be defined in XAML

    • Animations can be triggered via Code


Animating xaml example l.jpg
Animating XAML Example

<Canvas>

<Canvas.Triggers>

<EventTriggerRoutedEvent="Canvas.Loaded">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="theCircle"

Storyboard.TargetProperty="Width"

From="200" To="1" Duration="0:0:2"

AutoReverse="True"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Canvas.Triggers>

<Ellipse x:Name="theCircle" Width="100"

Height="100" Fill="Yellow" />

</Canvas>


Triggers l.jpg
Triggers

  • <EventTrigger />

    • Used to specify what starts an Animation

    • Properties are used to tie it to other Animation

      • RoutedEvent

        • The event that starts the triggers

      • Actions

        • A optional list of Storyboards to fire


Storyboards l.jpg
Storyboards

  • <Storyboard />

    • Contains one or more Animations

    • Properties are used to share with all Animations

      • TargetName and TargetProperty

      • From, By and To

      • Duration

      • AutoReverse

      • RepeatBehavior


Animation types l.jpg
Animation Types

  • DoubleAnimation

    • Animate numeric properties

<DoubleAnimation

Storyboard.TargetName="theCircle"

Storyboard.TargetProperty="Width"

From="200" To="1" Duration="0:0:2"

AutoReverse="True"/>


Animation types 2 l.jpg
Animation Types (2)

  • ColorAnimation

    • Animation colors

...

<ColorAnimation

Storyboard.TargetName="circleBrush"

Storyboard.TargetProperty="Color"

From="Black" To="LightGray" Duration="0:0:2"

AutoRepeat="True" />

...

<Ellipse x:Name="theCircle" Width="100" Height="100">

<Ellipse.Fill>

<SolidColorBrush x:Name="circleBrush"

Color="Yellow" />

</Ellipse.Fill>

</Ellipse>


Animationtypes 3 l.jpg
AnimationTypes (3)

  • PointAnimation

    • Animates Dual-Value Numbers (e.g. 100,100)

...

<PointAnimation

Storyboard.TargetName="myBrush"

Storyboard.TargetProperty="StartPoint"

From="0,0" To="1,1" Duration="0:0:2"

AutoReverse="True" />

...

<LinearGradientBrush x:Name="myBrush"

StartPoint="0,0" EndPoint="1,1">

<LinearGradientBrush.GradientStops>

...

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>


Animating with keyframes l.jpg
Animating with Keyframes

  • Keyframe Animations

    • DoubleAnimationUsingKeyFrames

    • ColorAnimationUsingKeyFrames

    • PointAnimationUsingKeyFrames

  • Allows you to create an Animation using:

    • KeyFrame objects that specify values at specific times

    • Each KeyFrame contains KeyTimes and Values


Animation with keyframes example l.jpg
Animation with KeyFrames - Example

...

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="theCircle"

Storyboard.TargetProperty="Width">

<DoubleAnimationUsingKeyFrames.KeyFrames>

<SplineDoubleKeyFrame Value="0" KeyTime="0:0:1" />

<SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" />

<SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" />

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

...


Programmatic animation l.jpg
Programmatic Animation

  • StoryBoard object enables programmatic control of animation sequences

    • Begin()

    • Pause()

    • Resume()

    • Stop()

    • Seek()

function onMouseEnter(sender) {

varanimationSequence = WPFCtrl1.findName(“animationSequence”);

animationSequence.Begin();

}



Silverlight 1 1 development l.jpg

Silverlight 1.1 development


Slide59 l.jpg

  • Integrated Design and Development with Silverlight

  • Declarative Programming (XAML)

  • Bringing Designers Into the Application Development Process

    • Tools for Designers: Microsoft Expression

    • Tools for Developers: Visual Studio


Slide60 l.jpg

Paper

JPG / TIFF

MOV / WMV

PSD

PPT

C++

C#

VB.NET

XAML

DesignerEmotional ConnectionLook, behavior, data visualization, usability, brand impact

DeveloperFunctional CapabilitiesDeployment, function, data connection and integrity, IT process, security



Roadmap l.jpg
Roadmap

MIX 07

Summer 07

Beyond…

  • Silverlight 1.0 Beta

  • Silverlight 1.1 Alpha

  • Silverlight 1.0

  • Silverlight 1.1

  • SilverLight for mobile

  • Expression Studio

  • Expression Blend 2 Preview

  • Expression Media Encoder

  • Expression Studio 2

  • Silverlight Tools Preview for Visual Studio ‘Orcas’

  • Silverlight Tools for Visual Studio ‘Orcas’


Summary l.jpg
Summary

  • Silverlightis cross-browser cross-platform internet plug-in

    • Media

    • Rich 2D graphics

    • Animation, transformation and text

  • Scenarios

    • Media

    • Interactive content

    • Rich Internet Applications

  • Programming model

    • XAML (Camel)

    • Javascript

    • Tools – Visual Studio and Expression


Where to learn more l.jpg
Where To Learn More

  • Silverlight Dev Center on MSDN

    • Great SDK documentation and Quickstart samples

    • http://msdn.microsoft.com/silverlight

    • http://www.silverlight.net (Coming soon!)

    • http://www.microsoft.com/silverlight

  • Good blogs to watch:

    • http://blogs.msdn.com/mharsh/

    • http://blogs.msdn.com/jstegman/

    • http://blogs.msdn.com/markjo ;-)


Thank you l.jpg
Thank you!

?

[email protected]

www

http://blogs.msdn.com/markjo


ad