silver lite document

7/31/2019 Silver Lite Document

1/22

Date:14-09-09

An Overview of Microsoft Silverlight

Microsoft Silverlight is the latest development offering from Microsoft and a logical progression ofMicrosoft technologies.

Before Silverlight:

Microsoft technologies progressed from separate and isolated development technologies to ActiveServer Pages (ASP), their first dynamic Web development technology.

To stay competitive, Microsoft decided to redesign and consolidate all of their development

technologies into a single platform, the .NET Framework. One distinct feature of the .NET Framework is ASP .NET. ASP .NET is an extremely powerful Web

development environment but, by default, the bulk of the processing occurs on the server. Web

applications will perform better if more processing occurs on the client. To improve performance, Microsoft introduced ASP.NET AJAX to extend the client scripting

capabilities and improve performance.

Enter Silverlight:

Microsoft determined how to offer the same ability to create incredible user interfaces on the client-

side that Windows Presentation Foundation (WPF) offers. As a result, Microsoft created a new downloadableplug-in technology that extends the ASP.NET AJAX environment significantly and, at the same time,

incorporates much of the functionality and rendering capabilities of WPF. The resulting technology was

originally named "WPF/E" (Windows Presentation Foundation / Everywhere) and was later renamed to

Silverlight.

WPF-It is a Microsoft technology meant for developing enhanced graphics applications for desktop

platform.WPF applications can be hosted on web browsers which offers rich graphics features for webapplications.

Web Browser Appliactions (WBA) developed on WPF technology uses XAML to host user interfacefor browser applications.WPF is the a complete revamp of Windows Forms so that user interface, graphic,

and media development is now designed around the .NET Framework.

Silverlight-Silverlight is a web based technology(launched by Microsoft in April 2007)

Silverlight is a subset of Windows Presentation Foundation that also extends and uses many of thefeatures and aspects of ASP.NET AJAX.

Silverlight also competing with Adobes Flash and is meant for developing rich browser based internetapplications.

Silverlight provides a retained mode graphics system similar to Windows Presentation Foundation


2/22

and integrates multimedia, graphics, animations and interactivity into a single runtime environment.

Silverlight Runtime is a plug-in for browsers to support Silverlight enabled applications. If Silverlightruntime is not installed, browsers will not be able to run Silverlight elements in the browser.

Silverlight applications are delivered to browsers in a text-based markup language called XAML. One

important difference between Flash and XAML is, Flash is a compiled application where as XAML istext based.

Silverlight provides various geometrical primitives like lines, ellipses and other shapes, to elements

like text, images,Layouts and media etc. Silverlight provides Cross browsers,Cross platforms and Cross Languages.

Silverlight in 3v. :Microsoft released Silverlight in 3 Versions.

1.Silverlight1:It is purely AJAX and Javascript based. All the code has to be written in Javascript and

XAML.

2.Silverlight 2:(previously referred to as version 1.1) includes a version of the .NET Framework,

implementing the same full Common Language Runtime version as .NET Framework 3.0; so it can execute

programs written in any .NET language.

3. Silverlight3 :The current version, 3.0, was released on July 9, 2009

Silverlight3 version brought additional interactivity features(In the fields of information science,

communication, and industrial design.) and support for .NET languages and development tools.

Silverlight 3 includes an increased number of controls(Around 60) - DataGrid, TreeView, various

layout panels, DataForm for forms-driven applications and DataPager for viewing paginated data. .xap(Pro. Zap) file is the compressed output file for the Silverlight application.

Silverlight 3 supports Out-of-Browser experiences, i.e., Silverlight applications can be installed to the

system for offline access (provided the application manifest is designed to allow local installation)where they run outside the browser.

Silverlight also supports Windows Video (WMV), Windows Media Audio (WMA), and MP3 media

formats.

Silverlight Architecture


3/22

Note: The figure shows the difference between ASP.NET processing and Silverlight processing

Unlike ASP.NET, the bulk of Silverlight processing occurs on the client machine thus decreasingserver resource utilization and improving the Web experience on the client.

When a client initially attempts to run a Silverlight application, if the Silverlight plug-in has not beeninstalled on the client machine, it will be downloaded and installed. Upon subsequent requests to run

the application, the application will instantiate on the client machine and make requests for resources

from the server only when necessary.

Silverlight was designed using the same design paradigm as ASP.NET. Each page of a Silverlight

application includes an associated code behind file that includes the code that handles events fired by


4/22

the page.As Silverlight applications are composed of text-based files that include markup and code,

they can be created using any text editor; however, more advanced tools and development

environments such as Visual Studio or Expression Blend simplify the task significantly.

Silverlight Tools &Controls

The two most common Silverlight design and development tools are:

Visual Studio 2008 - provides the ability to build Silverlight applications using XAML and offers

only a read-only visual designer. Expression Blend 3 - provides the ability for designers to graphically build Silverlight applications. Silverlight 3.0 RTW(RunTimeWorkshop)

1. asp:Silverlight Control -The Silverlight framework provides a generic class, or type, for workingwith XAML, the System.Web.UI.SilverlightControls.Silverlight control.

asp:Silverlight control is used to insert XAML into an ASP.NET AJAX page in a generic mannerThe most commonly used attribute of the asp:Silverlight control is the Source attribute. The Source attribute

identifies the XAML file to include in the page.

The Source attribute of the asp:Silverlight control can also point to a XAP file. A XAP file is a ZIP-

compressed file containing a Silverlight application - including XAML files and compiled code-behind

assemblies.

2. asp:MediaPlayer Control -The asp:MediaPlayer control is ASP.NET Extension that makes it easy to

integrate audio and video into an ASP.NET or ASP.NET AJAX application without hand coding XAML or

JavaScript.

The asp:MediaPlayer control inherits from the System.Web.UI.SilverlightControls.Silverlight

control and, as such, includes all of the properties, events, and methods included in the asp:Silverlightcontrol. It also includes a number of its own properties and methods.

Note:The most commonly used properties are the MediaSource and the MediaSkinSource properties.


5/22

Creating a Silverlight Application

A Silverlight project may contain multiple Silverlight files. Each Silverlight file is built upon

the same architecture as ASP.NET and many other Microsoft .NET development technologies.

The first thing to do when creating a Silverlight application in Visual Studio is to create a new project.

After clicking OK to instruct Visual Studio 2008 to create the new Silverlight project, VisualStudio will prompt for additional information. Visual Studio configures a Silverlight application for testing

on the server when the application is created.

The options offered by Visual Studio are displayed in the Add Silverlight Application dialogshown below:


6/22

As shown above, the available options are to:

Add a new ASP.NET Web to the solution to host Silverlight: This is the most commonly selected

option and will create an ASP.NET Web project in addition to the Silverlight project. The ASP.NETWeb project will be used to test the Silverlight application.

Automatically generate a test page to host Silverlight at build time: This option should be used to

manually create a Web page for testing the Silverlight application, most likely in scenarios where thetest page will be created in a technology other than ASP.NET, such as PHP.

Link this Silverlight control into an existing Web site: This option is used to link the new Silverlight

project to an existing ASP.NET test project.

Other (2 nd & 3rd)options on the Add Silverlight Application dialog are available conditionallybased on the option selected at the top of the dialog.

Visual Studio automatically opens Page.xaml for editing.A Silverlight control is comprised of a file

containing XAML ( Page.xaml file)and a second file containing code, or code behind files(Page.xaml.cs.) .

An alternative to using Visual Studio to create XAML is to design XAML using Expression Blend.

A Silverlight application created in Visual Studio can easily be opened in Expression Blend by right-clicking

on the Page.xaml file in the Visual Studio Solution Explorer and selecting Open in Expression Blend from thecontext menu.

Note: 1)When the new project is created, two projects will appear in the Solution Explorer.2)Expression Blend displays the same projects and files in the Solution Explorer as Visual Studio2k8.

Toolbox in Expression Blend -At the left side of the Blend interface are icons for all of the controls


7/22

available to us. All controls in the toolbox provide a tooltip (accessible when hovering over the button with

the mouse), and a hotkey (which is shown in the tooltip). A hotkey is a key you can press to quickly activate

that control in the toolbox.

When the new project is created, two projects will appear in the Solution Explorer.

The Expression Blend New Project dialog is shown above. When a new Silverlight application is created

from within Expression Blend, no test harness Web application is created.


8/22

Toolbox:In Tool box we can find simplest controls in the toolbox are the Shape primitives like Rectangle,

Ellipse, and Line shape primitives,some buttons in the Toolbox actually contain more than one control in this

case, the Shape button(Contains Rectangle, Ellipse, and Line shape primitives).

Drawing Tools (Pen and Pencil)-The Pen and Pencil tools allow for the creation of XAML Path elements.APath element is a collection of points which makes up a custom shape.

Select and Direct Select Tools-After drawing a shape, you may want to later modify its position, rotation, or

other properties. We can select a shape for modification using the Select and Direct Selection tools.

Pan and Zoom Tools-The Design Surface in Blend can be scrolled using the Horizontal and Vertical

Scrollbars. You can also pan (scroll the viewing area) using the Pan Tool from the toolbox. The Pan Toolresembles a hand and, when selected, allows you to click and drag the viewing area around. The Zoom Tool

allows you to zoom in and out of the design surface. After selecting the Zoom Tool, click on the design

surface to zoom in, and press Alt and click to zoom out. You can also double-click the Zoom tool to zoom the

design view to it's largest extents.

Brush Properties and Brush Tools-Brushes define the color of shapes, including fill color, outline color


9/22

("stroke"), and texture. We use the Brushes Panel in the Properties Window to define brushes for a shape.

Layout Tools-Silverlight contains several layout controls(Canvas,Grid,ScrollViewer,Stackpanel,border) or

controls that can contain other child controls within their borders. These controls are available in the Toolbox

under the Layout controls subpanel.

Input controls-Silverlight contains input controls for Line of Business type applications.Blend provides these controls under the Text, Input, and Asset Library Toolbox Icons.

Ex: TextBox,PasswardBox,CheckBox,ListBox,ComboBox,Button etc.

Full List of Controls :

Calendar-What is more, the control is Blend-skinnable, allowing for different customizations throughthe themes available or you own predefined themes.

Chart -Interactive, rich, animated charts that enable the end users to analyze complex data. Take data


10/22

visualization to another dimension with the first commercial 3D Chart for Silverlight.

ColorPicker

ComboBox

ContextMenu CoverFlow- RadCoverFlow uses real 3D transitions to navigate through the items.

Cube -RadCube for Silverlight is another tool that brings a 3D-like touch to your application. The

control is a multi-platform navigational component that encapsulates different parts of your

applications logic. You can build versatile wizard forms, navigation systems or even play videos.

DatePicker

Docking -We get the dockable ToolWindows, a hidden DockingManager control, and a designer to


11/22

make creating attractive layouts easy.

Drag & Drop

Editor

Expander -You can place the expander anywhere on your page and embed any content inside the

drop-down area.

Gauge- If you are building business dashboards or you just need graphical indicators, you will findthe new RadGauge control indispensable. With the rich assortment of circular, linear and numeric

gauge types.


12/22

GridView -RadGridView is the ultimate Silverlight grid control that features unrivalled performance

through LINQ-based data engine, remarkably flexible hierarchy model, advanced features such as

Excel-like filtering, row details, totals, export to Word/Excel/CSV and many more.

HtmlPlaceHolder

Layout Panels

MaskedTextBox

MediaPlayer -The control is very flexible and providing numerous advanced capabilities. Create and

load playlists, set chapters, watch the video in a full-screen mode, completely customize the

appearance of the control or integrate the control with RadCoverFlow for a brilliant visualpresentation

Menu

Navigation

NumericUpDown -Allow your users to define various value formats through RadNumericUpDown,providing them with a rich user experience. Besides the predefined numeric, percentage and currency

formats, you can also customize the formats to meet the customers' business requirements.


13/22

PanelBar

ProgressBar

Scheduler-Add a scheduling component to your application that combines the comprehensive nature

of an Outlook-style scheduler with the data input best-practices introduced by Google

Calendar.Impress your users with intuitive drag-and-drop functionality, inline or pop-up Edit Forms.

Slider -It is a flexible UI component that allows users to select a value from a defined range. The

control is completely customizable in terms of appearance and offers numerous configuration optionslike orientation, small change, mouse wheel support, selection range, snap to tick, tick placement, tick

template, etc.

TabControl

TimePicker -Powerful databinding, different views month, year, decade, multiple views, culture

awareness, flexible date navigation and transition animations, fully blend skinnable RadCalendar for

Silverlight has it all. What is more, you can further improve the usability of the control withRadTimePicker.


14/22

ToolBar

TreeView

Upload -Upload you will save end-users time and efforts, utilizing its multiple files upload and

automatic upload function. With this dedicated file-upload control you can achieve fast performance,since it allocates a minimum amount of server memory, while enabling optimized and fully

configurable single and multi-file uploads.

Window

A great number of controls were added in Silverlight 3.0, including fulfilling some promises from theSilverlight Toolkit on bringing Mature band controls into the runtime. Those include:

DockPanel WrapPanel Label ViewBox AutoCompleteBox DataGrid

TreeView Expander HeaderedItemsControl

HeaderedContentControl

Silverlight Project Architecture

Here One project is the project that contains the actual Silverlight application and the second

project serves as a test harness for the Silverlight application.A Silverlight project may contain multiple Silverlight files. Each Silverlight file is built upon the

same architecture as ASP.NET and many other Microsoft .NET development technologies. A Silverlight


15/22

control is comprised of a file containing XAML and a second file containing code, or code behind files (C#,

in this case).

In the test harness project there are three Web pages created, by default. The Default.aspx page is not

used in the test harness project. However, there is an ASP.NET page and an HTML page created thatare named after the project. The HTML page includes the Silverlight control using an

element while the ASP.NET page includes the Silverlight control using a new

element.

In software testing, a test harness or automated test framework is a collection of software and test data

configured to test a program unit by running it under varying conditions and monitoring its behavior

and outputs

Test harnesses allow for the automation of tests. They can call functions with supplied parameters and

print out and compare the results to the desired value. The test harness is a hook to the developedcode,.

The typical objectives of a test harness are to:

Automate the testing process. Execute test suites of test cases. Generate associated test reports.

A test harness may provide some of the following benefits:


16/22

Increased productivity due to automation of the testing process. Increased probability that regression testing will occur. Increased quality of software components and application.

XAML

Extensible Application Markup Language (XAML, pronounced / zml/ ) is a declarative XML-

based language created by Microsoft which is used to initialize structured values and objects.

Overview of XAML

XAML is used extensively in .NET Framework 3.0 technologies, particularly Windows Presentation

Foundation, Silverlight, and Windows Workflow Foundation (WF). In WPF, XAML is used as a userinterface markup language to define UI elements, data binding, eventing, and other features. In WF,workflows can be defined using XAML.

XAML elements map directly to Common Language Runtime object instances, while XAML

attributes map to Common Language Runtime properties and events on those objects.

XAML files can be created and edited with visual design tools such as Microsoft Expression Blend,

Microsoft Visual Studio, and the hostable Windows Workflow Foundation visual designer. They canalso be created and edited with a standard text editor, a code editor such as XAMLPad, or a graphical

editor such as Vector Architect.

In Silverlight applications, user interfaces are declared in XAML and programmed using a subset ofthe .NET Framework. XAML can be used for marking up the vector graphics and animations.

XAML files are XML files that generally have the .xaml file name extension.

XAML as a language is case-sensitive. This is another consequence of XAML being based on XML,

which is also case-sensitive per the XML language definitions. The names of XAML elements andattributes are case-sensitive.

Syntax:

This Windows Presentation Foundation example shows the text "Hello World!" in the top-level XAMLcontainer called Canvas.

HelloWorld!
http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xaml


17/22

The schema (the xmlns="http://schemas.microsoft.com..." part) may have to be changed to work on your

computer. Using a schema that Microsoft recommends, the example can also be like this

Hello World!

This can be integrated into a web page if WPF is installed using XBAPs (XAML Browser Applications)

But in case of Silverlight plugin, the code cannot be included directly in an HTML page; rather it must beloaded into the page via JavaScript, because loose XAML files can also be viewed on their own in a

compatible web browser (including Internet Explorer and Firefox) in conjunction with the .NET Framework

3.0, without the need for the Silverlight plugin..

XAML Example

createMySilverlight();

The following example shows the contents of a very basic Silverlight XAML file.

Note:The MySilverlight.js file must contain the code that loads the above XAML code (as an XML file)under the MySilverlight html element

Declaring Objects:

Ways to declare objects in XAML:

Directly, using object element syntax: Uses opening and closing tags to declare an object as an XML

element. You can use this syntax to declare root objects or to set property values.


18/22

To create a XAML object in object element syntax.

----------

---------

The following example uses object element syntax to declare a Canvas object.

----------

---------

Some objects, such as Canvas, can contain other objects.

----------

---------

Setting Properties :

We can set properties on objects that you declared by using object element syntax. There are multiple ways to

set properties in XAML:

By using attribute syntax. By using property element syntax. By using content element syntax.

By using a collection syntax (which is usually implicit collection syntax).

Setting a Property by Using Attribute Syntax-Use the following syntax, where objectName is the object you

want to instantiate, propertyName is the name of the property that you want to set on that object, andpropertyValue is the value to set.

Ex: The following example uses attribute syntax for three attributes to set the width, height, and fill


19/22

properties of a Rectangle object.

Setting a Property by Using Property Element Syntax-Some properties can be set by using property element

syntax. To use property element syntax, it must be possible to specify a new instance of an object element in

order to "fill" the property element value.

In the following grammar, property is the name of the property that you want to set and

propertyValueAsObjectElement is a new object element that declares a new object, which is of the value typethat the property expects.

propertyValueAsObjectElement

The following example uses property element syntax to set the fill of a Rectangle with a SolidColorBrushobject element. (Within the SolidColorBrush, the Color is set by using attribute syntax.) The rendered result

of this XAML is identical to the previous XAML example that set Fill using attribute syntax.

Setting a Property by Using Content Element Syntax-Some Silverlight objects define a property that enables

a XAML syntax whereby you can omit the property name and set the property by providing a value within

the owning type's object element tags. This is known as content element syntax.

The following example sets the Text property of a TextBlock without explicitly specifying the Text property.

In this case the property is set using what XML would consider to be content or "inner text," rather than usingan attribute, or declaring an object element.


20/22

Hello!

Setting a Property by Using a Collection Syntax-Collections are an interesting case in XAML, because thereare several variations of collection syntax. Also, it might at first appear that XAML is letting you "set" read-

only collection properties. In reality, what XAML enables here is adding items to a collection.

Hello

World

Events:XAML is a declarative language for objects and their properties, but it also includes a syntax forattaching event handlers to objects in the markup. You specify the name of the event as an attribute name on

the object where the event is handled. For the attribute value, you specify the name of an event-handlerfunction that you define in code.

The following XAML example shows how to add a handler for the Loaded event for the Canvas, which in

this example is the root of a XAML file. The absence of x:Class on this root indicates the JavaScript API.

Resolution of the function name is therefore deferred until run time. At run time, when the event occurs, theJavaScript scripting scope is checked for a member named "onLoaded" and that function is executed.

The function named onLoaded is defined in a JavaScript file. This JavaScript file is associated with the

HTML of the hosting page through the src parameter of the tag in HTML.

XAML, Events, and Code-Behind -Most Silverlight-based applications are generated by both markup and

code-behind sources. Within a project, the XAML is written as a .xaml file, and a CLR language such asVisual Basic or C# is used to write a code-behind file. When a XAML file is compiled, the location of the

XAML code-behind file for each XAML page is identified by specifying a namespace and class as the

x:Class attribute of the root element of the XAML page.

XAML Root Elements and xmlns -A XAML file must have only one root element, in order to be both a

well-formed XML file and a valid XAML file. The following example shows the root element of a typical

XAML file for a Silverlight "page" with the root element UserControl.


21/22

The root element also contains the attributes(2) xmlns and xmlns:x. These attributes indicate to a XAML

processor which XML namespaces contain the element definitions for elements that the markup references.

which maps the XAML language namespacehttp://schemas.microsoft.com/winfx/2006/xaml.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

Notice that this is the same XAML namespace that WPF uses as its default.

The second declaration maps a separate XAML namespace for the XAML-defined language elements,mapping it (typically) to the x: prefix:

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Language components defined by the XAML namespace are prefixed by x: when they are referenced in the

markup of a file that has this mapping. This usage of xmlns to define a scope for usage and mapping is

consistent with the XML 1.0 specification.

This xmlns value is also identical to the one used by WPF.

x: Prefix:This x: prefix is used to map the XAML namespace in the templates for Silverlight-based projects

The following are the most common x: prefix/XAML namespace programming constructs you will use:

x:Key: Sets a unique key for each resource in a ResourceDictionary.

10,10,10,40

x:Class: Specifies the CLR namespace and class name for the class that provides code-behind for a XAML

page, and names the class that is created by markup compile. You must have such a class to support code-

behind.

x:Name: Specifies a run-time object name for the instance that exists in run-time code after an object element

defined in XAML is processed.

Canvas:There are 3 different types of layout panels provided by Silverlight. The Grid control is one of them.

These are the 3 different types of layout panels provided by Silverlight:

1. Canvas - Position child elements absolutely in x,y space.

2. StackPanel - Position child elements relative to one another in horizontal or vertical stacks.

3. Grid - Position child elements in rows and columns.

You have to add a layout panel to every xaml page we create. All other UI elements must be added

inside one of the layout panels. Each page can have exactly one layout panel control.
http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xaml


22/22

Canvas is one of the available layout controls.

Canvas defines a area within which you can place other controls by specifying the x and y coordinateposition. It is possible to overlap multiple controls within a canvas. Contrary to regular HTML, when controls

are overlapped in a Canvas, overlapped controls can hide other controls.

When controls are placed within a Canvas, the x and y coordinates must be specified for each control usingthe attributes Canvas.Left and Canvas.Top.

This sample shows how to place a rectangle control within a Canvas by specifying x and y coordinates:

The above xaml tags defines a rectangle, filled with green color, of size 100x100 pixels. The rectangle will be

placed 25 pixels from the left of the Canvas and 40 pixels from the top of the Canvas.

XAMLPad is a lightweight tool provided with the .NET Framework 3.0 SDK to quickly create simple

Extensible Application Markup Language (XAML) files. It provides a split screen where the XAML code canbe typed and immediately previewed in the above XAML renderer..

Ref:http://www.learn-silverlight-tutorial.com/TheSilverlightFramework.cfm#h1.3http://msdn.microsoft.com/en-us/library/cc189061(VS.95).aspx

http://www.telerik.com/products/silverlight

http://en.wikipedia.org/wiki/XAML

Ravindar
http://www.learn-silverlight-tutorial.com/TheSilverlightFramework.cfm#h1.3http://msdn.microsoft.com/en-us/library/cc189061(VS.95).aspxhttp://www.telerik.com/products/silverlighthttp://www.learn-silverlight-tutorial.com/TheSilverlightFramework.cfm#h1.3http://msdn.microsoft.com/en-us/library/cc189061(VS.95).aspxhttp://www.telerik.com/products/silverlight

silver lite document

Documents