Microsoft Silverlight
Orlando Flores
CSCI 6314.01
Brief History of Silverlight
Silverlight - formerly code named “Windows
Presentation Foundation Everywhere (WPF/E),” is
Microsoft’s platform for Rich Internet Applications
(RIAs).
Microsoft announced Silverlight 1.0 Beta and 1.1
Alpha at the 2007 MIX conference which is
Microsoft’s annual conference for web developers
and designers.
The demos were so captivating which made many
technology bloggers who attended the conference
to blog about Silverlight’s excitement and
potential. Since then,Microsoft has continued
developing and enhancing Silverlight.
Silverlight’s Purpose
It is designed to complement Ajax and other RIA
technologies, such as Adobe Flash and Flex,
Sun’s JavaFX and Microsoft’s own ASP.NET Ajax.
Silverlight currently runs as a browser plug-in for
Internet Explorer, Firefox and Safari on recent
versions of Microsoft Windows and Mac OSX. In
addition, developers from theMono project
(www.mono-project.com) are developing an
open-source implementation of Silverlight for
Linux distributions called Moonlight.
Brief Update on Current Silverlight
Software
While early versions of Silverlight focused on streaming
media, current versions support multimedia, graphics, and
animation and give developers support for Common
Language Infrastructure (CLI) languages and development
tools. Silverlight is also one of the two application
development platforms for Windows Phone 7.
Now in 2011 Microsoft has released 5 versions over the
course of 4 years: the first version was released in 2007;
the current version, 4, was released in April 2010 and the
5th version is scheduled for release in the second half of
2011. It is compatible with multiple web browsers used on
Microsoft Windows and Mac OS X operating systems. Mobile
devices with Windows Phone 7 and Symbian (Series 60)
phones are supported.
Open Source Version of Silverlight
A free software implementation
named Moonlight was developed
by Novell in cooperation with
Microsoft, is available to bring
Silverligh versions 1 and 2
functionality to Linux, FreeBSD and
other open source platforms
although some Linux distributions do
not include it, citing redistribution
and patent concerns.
What is Silverlight?
Silverlight is a powerful development
platform for creating engaging,
interactive user experiences for Web,
Desktop, and mobile applications
when online or offline.
What is Silverlight?
A web presentation technology that
runs on a variety of platforms.
Silverlight has great media
streaming capabilities.
Allows the user to have rich, visually
stunning, and interactive
experiences.
Some Benefits of Silverlight
Supported by most browsers,
desktop operating machines, and
some mobile devices.
Ability to use .Net development tools
Also provides for an easy path to
convert web applications to desktop
application.
Growing in popularity
Silverlight Tools
Visual Studio 2010
Silverlight 4 Tools for Visual Studio
Microsoft Expression Blend 3
Visual Studio 2010
Provides many built in classes
The .Net tools that are included are
important for Silverlight application
development.
Also has a Intellisense feature that
helps you during the coding.
Microsoft Expression Blend 3
Generates XAML code automatically.
Allows the user to modify graphics,
animations, and other user related
content.
Also it is a great “visual” platform.
Terms
XAML - eXtensible Application Markup
Language. It is XML based. XAML is used
to describe objects. Pronounced as
“zammel”.
C#- CLI programming language.
Visual Basic- CLI programming language.
.xap file contains all the XAML, resources,
and references in a compressed form.
Silverlight’s Summary
Silverlight is not only an appealing canvas for displaying
rich and interactive Web and media content to end users. It
is also a powerful yet lightweight platform for developing
portable, cross-platform, networked applications that
integrate data and services from many sources.
Furthermore, Silverlight enables you to build user interfaces
that will significantly enhance the typical end user
experience compared with traditional Web applications.
While Silverlight as a client-side runtime environment
seems simple and compact in size, the Silverlight
development platform integrates a number of features and
complex technologies, making them accessible for
developers. To create effective Silverlight-based
applications, developers need a working knowledge of the
platform architecture.
Silverlight’s two programming
models
Silverlight supports two
programming models: the JavaScript
API for Silverlight and the managed
API for Silverlight. The managed API
is based on a subset of the .NET
Framework. Many of the features in
Silverlight are supported only by the
managed API.
Using Silverlight
Step 1. Open Visual Studio,
Step 2. Open New Silverlight Project
Now By Default you will get Page.xaml
with the following code.
Step 2. Open New Silverlight
Project
Step 3. To display a text message in
silveright there is a tag called
Step 4. Now Run the Application By
Pressing F5 with debugging or
Ctrl+F5 without debugging.
Silverlight’s Hello World
When Adding Content
Content can be added either
declaratively or programmatically.
Elements in the XAML page are
maintained in a hierarchy just like
the HTML’s DOM.
This allows you to do many fun
things.
The Object Tag
Standard Parameters
Description
Source The location of the xap.
OnError A reference to the Javascript function
BackgroundThe background color of the
tag
MinRuntimeVersionDefines what the minimum
version number is to run the xap. RTM version of
Silverlight 3 is 3.0.40818.0
AutoUpgradeDetermines whether or not to
automatically upgrade if the MinRuntimeVersion
is not met.
The Object Tag
Silverlight applications are rendered
in the browser because of the object
tag.
The Object Tag
Used to embed the Silverlight plug-in
in the web page.
Has parameter values that reference
JavaScript function
onSilverLightError() to return
errors.
Contains property also known as
Source which contains the location of
the XAP file.
Basic Layout Controls
Positioning Elements
Silverlight uses two axes running from the
top-left corner of the screen called the Left
Horizontal Axis and Top Vertical Axis. The
Top left corner has 0,0 coordinates.
As we proceed we will be focusing on the
other elements on the page such as
runtime settings, styles, and templates.
Dependency properties and attached
properties
Basic Layout Controls
The main layout controls used in
Silverlight are:
• Canvas
• StackPanel
• Grid
Canvas
Canvas is the most basic layout
Used for positioning elements in an absolute
manner with coordinates
Uses Attached Properties which allows for
the parent container to extend the property
of the controls within it
Canvas.Left and Canvas.Top properties are
used to set the coordinates desired
Canvas also allows one to modify Z index, for
superimposition effects which one of its
unique properties in comparison to the other
layout options.
StackPanel
StackPanel is the layout control that
stacks the elements either vertically
or horizontally.
Orientation = “Vertical” or
“Horizontal”
Grid
Grid is the most flexible layout in
most cases
It uses rows and columns
It is recommended for one to use
Expression Blend to visually work
with layout since it will generate the
XAML code to use.
Simple Animation
Animation can be done either declaratively and
programmatically.
It is best understood programmatically.
Storyboard class creates and defines what will happen in
the animation. Including the features of when to start, stop,
and repeat.
Interval property is the timer that allows the animation to
occur
Animations in Silverlight are created by animating property
values of objects. For example, you can animate the width
of a rectangle, the angle of a RotateTransform, or the
color value of a button. In the following example, the
Opacity property is animated. To try this example, click
the rectangle to see it fade in and out of view indefinitely.
Example
http://www.silverlight.net/learn/quickstarts/animations
Using Blend for Animations
Blend 3 can be used to animate
objects declaratively.
Blend will generate the XAML code
for you.
Blend 3 also allows for you to define
the key frames for your object and
will animate between them which
makes it very user friendly.
HTML bridge
The HTML bridge allows one to
modify the DOM elements and call
JavaScript functions from within the
Silverlight application.
The reverse is also possible,
however, you must specify the
functions to reduce security risks.
Media
Silverlight’s biggest strength is its media
functionality.
Silverlight has been used to stream media
content on a number of high-profile sites.
• 2008 Olympics on NBC
• Blockbuster Video
• Netflix
The formats that Silverlight supports:
WMA, WMV, mp3, AAC, AVC, H.264/mpeg,
and HD formats.
Media
One great feature of Silverlight is its
ability to do “adaptive streaming”.
This feature varies the quality in
other words the bit rate of the media
stream depending on the user’s
available bandwidth, resulting in the
best experience possible.
Media example
Netflix
Data Binding
Data binding is a technique that
binds two sources of data together
and maintains them in sync.
Each data change is reflected by the
elements that are bound to the data.
Data Binding
Silverlight also offers a rich binding
model that makes it easy to work
with data.
Dependency properties are used to
maintain the relationship between
the object and the data source.
Data Binding
DataBinding Modes
OneTime
• Lightweight option that is used if the value will
never change from its initialization
OneWay
• If the item that the object is bound to is changed,
the bound property will be updated as well
TwoWay
• Allows for the bound property to alter the bound
object
Data Binding
Binding ListBox provides a list of bound
items
DataTemplates provides a template of
bound items
DataGrid is one of the most-used controls
which includes the following:
• Column ordering
• Two-way data binding
• Column resizing
• Column positioning
• Highlighting selected rows
Obtaining the Data
Silverlight is a client technology deployed
over the internet.
Therefore one would not want a browser
plug-in having direct access to your
database.
Sockets
Sockets are considered to be the
most advanced data access
endpoints.
Must dedicate communication over a
specific port range
They are very powerful means of
communication for your application
It is best for business applications
Silverlight Working with Sockets
The System.Net.Sockets namespace in Silverlight provides
a managed implementation of the sockets networking
interface for developers who need to tightly control access
to the network.
On Windows, the System.Net.Sockets namespace provides
a managed implementation of the Windows Sockets
(Winsock) interface.
On Apple Mac OS X, the System.Net.Sockets namespace
provides a managed implementation of the sockets
interface based on Berkeley Software Distribution (BSD)
UNIX.
System.Net.Sockets namespace
Provides a mechanism for real-time duplex
communication with remote network
resources and enables higher-level APIs to
communicate over a bi-directional
transport. This also allows an application
to interoperate as a client with existing
TCP services.
The System.Net.Sockets namespace in
Silverlight 4 has added support for UDP
multicast clients.
Classes
Class Description
Socket Implements the Berkeley sockets interface.
SocketAsyncEventArgs Represents an asynchronous socket
operation.
SocketException The exception that is thrown when a
socket error occurs.
UdpAnySourceMulticastClient A client receiver for multicast
traffic from any source, also known as Any Source Multicast
(ASM) or Internet Standard Multicast (ISM).
UdpSingleSourceMulticastClient A client receiver for
multicast traffic from a single source, also known as Source
Specific Multicast (SSM).
http://msdn.microsoft.com/en-
us/library/system.net.sockets.socket%28v=VS.95%29.asp
x
Cross-domain policy
Silverlight operates in a browser’s secure
sandbox area, and is limited to certain
access policies.
Cross-domain access is one of the
restrictions
If your application is hosted in one domain
it cannot access services in another
domain unless the service allows you to.
In Closing
The Pro’s of Silverlight
Ability to create the same user experience across
browsers and platforms, so the application
performs the same everywhere.
Integration of data and services from multiple
networked locations into on application using .NET
Framework.
A media-rich, compelling, and accessible user
interface.
Easy for developers to build applications by
overcoming the incompatibilities of current
technologies.
Bright future for Silverlight.
Resources
Download Silverlight
http://www.microsoft.com/silverlight/r
esources/
Quick start Guide
http://www.silverlight.net/learn/quicks
tarts/