Date:14-09-09

An Overview of Microsoft Silverlight

Microsoft Silverlight is the latest development offering from Microsoft and a logical progression of Microsoft technologies. Before Silverlight:

Microsoft technologies progressed from separate and isolated development technologies to Active Server 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 clientside that Windows Presentation Foundation (WPF) offers. As a result, Microsoft created a new downloadable plug-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 web applications. Web Browser Appliactions (WBA) developed on WPF technology uses XAML to host user interface for 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 the features and aspects of ASP.NET AJAX. Silverlight also competing with Adobes Flash and is meant for developing rich browser based internet applications. Silverlight provides a retained mode graphics system similar to Windows Presentation Foundation

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 Silverlight runtime 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 is text 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

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 decreasing server 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 been installed 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

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 working with 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 manner The 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. <asp:Silverlight ID="Silverlight1" runat="server" Height="400px" Width="600px </asp:Silverlight>

"Source="~/Scene.xaml">

The Source attribute of the asp:Silverlight control can also point to a XAP file. A XAP file is a ZIPcompressed 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:Silverlight control. It also includes a number of its own properties and methods. <asp:MediaPlayer OnClientChapterStarted="onChapterStarted" MediaSkinSource="~/CustomProfessional.xaml" AutoPlay="true" ID="MediaPlayer2" runat="server" Height="400px" Width="600px" MediaSource="~/SteveBreastonCardinalsPuntReturn.wmv"> Note:The most commonly used properties are the MediaSource and the MediaSkinSource properties.

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, Visual Studio 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 dialog shown below:

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.NET Web 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 the test 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 conditionally based 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 the context 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

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.

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.A Path 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 Tool resembles 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

("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 through the themes available or you own predefined themes.

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

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

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 find the new RadGauge control indispensable. With the rich assortment of circular, linear and numeric gauge types.

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 visual presentation

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.

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 options like 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 with RadTimePicker.

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 the Silverlight 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

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 that are named after the project. The HTML page includes the Silverlight control using an <object> element while the ASP.NET page includes the Silverlight control using a new <asp:Silverlight> 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 developed code,.

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:

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 XMLbased 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 user interface 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 can also 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 of the .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 and attributes are case-sensitive.

Syntax: This Windows Presentation Foundation example shows the text "Hello World!" in the top-level XAML container called Canvas. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock>HelloWorld!</TextBlock> </Canvas>

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 <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <TextBlock>Hello World!</TextBlock> </Canvas> 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 be loaded 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.. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XAML Example</title> <script type="text/javascript" src="MySilverlight.js" /> </head> <body> <div id="MySilverlight" > </div> <script type="text/javascript"> createMySilverlight(); </script> </body> </html> The following example shows the contents of a very basic Silverlight XAML file. <UserControl x:Class="MySilverlight.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid Background="OldLace"> </Grid> </UserControl>

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.

To create a XAML object in object element syntax. <objectName> -----------------</objectName> The following example uses object element syntax to declare a Canvas object. <Canvas> -----------------</Canvas> Some objects, such as Canvas, can contain other objects. <Canvas> <Rectangle> -----------------</Rectangle> </Canvas> 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, and propertyValue is the value to set. <objectName propertyName="propertyValue" .../> Ex: The following example uses attribute syntax for three attributes to set the width, height, and fill

properties of a Rectangle object. <Rectangle Width="100" Height="100" Fill="Blue" /> 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 type that the property expects. <object> <object.property> propertyValueAsObjectElement </object.property> </object> The following example uses property element syntax to set the fill of a Rectangle with a SolidColorBrush object 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. <Rectangle Width="100" Height="100" > <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> </Rectangle>

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 using an attribute, or declaring an object element. <TextBlock>

Hello! </TextBlock> Setting a Property by Using a Collection Syntax-Collections are an interesting case in XAML, because there are several variations of collection syntax. Also, it might at first appear that XAML is letting you "set" readonly collection properties. In reality, what XAML enables here is adding items to a collection. <StackPanel> <TextBlock>Hello</TextBlock> <TextBlock>World</TextBlock> </StackPanel>

Events:XAML is a declarative language for objects and their properties, but it also includes a syntax for
attaching 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-handler function 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, the JavaScript scripting scope is checked for a member named "onLoaded" and that function is executed. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Loaded="onLoaded" /> 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 <SCRIPT> 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 as Visual 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. <UserControl x:Class="MySilverlight.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid Background="OldLace"> </Grid> </UserControl>

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 namespace http://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. <Thickness x:Key="offsetBottomThickness">10,10,10,40</Thickness> 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 codebehind. 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.

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 coordinate position. 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 using the attributes Canvas.Left and Canvas.Top. This sample shows how to place a rectangle control within a Canvas by specifying x and y coordinates: <Canvas Width="500" Height="500" Background="White"> <Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100" Height="100" /> </Canvas> 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 can be typed and immediately previewed in the above XAML renderer.. Ref: http://www.learn-silverlight-tutorial.com/TheSilverlightFramework.cfm#h1.3 http://msdn.microsoft.com/en-us/library/cc189061(VS.95).aspx http://www.telerik.com/products/silverlight http://en.wikipedia.org/wiki/XAML

Ravindar