Silverlight Tutorial

Introduction :
It is an alternative to Flash, a plugin lightweight, less than 2 megabytes in version 1.0, which installs the application on the user's browser and complete with a GUI interacting with the server. This is actually a subset of WPF, light to be portable. With Silverlight you can create RIA, rich Internet applications, perform amazing interfaces, integrate animations, videos.

It offers a browser portion of the graphics capabilities of WPF and that are the same as what Flash plugin from Adobe.
- Uses XAML
- 2D vector graphics with resizing of objects.
- Works with Ajax so JavaScript, DOM and XMLHttpRequest.

Silverlight also works in local mode. NET environment. On the Web, the components are accessible through Active X in Internet Explorer while Firefox and other browsers use the Mozilla plugin system.


The possibilities of Silverlight :
- HTML Integration
Silverlight is programmed in JavaScript. It uses DOM to access elements of the page and the JavaScript event control the graphical objects in Silverlight.

- XAML
It uses XAML to describe the graphical interface.
It can generate XAML from data on the server, and create a dynamic application. The method createFromXaml called in JavaScript creates the graphic component (widget) equivalent on the page.

- Vector Graphics
The image size does not affect their accuracy. It can reduce or enlarge the same maintaining perfect image.
The runtime is fast enough to use a video as a texture object in 2D.

- Videos
It supports video files in wmv format, in high definition. Several videos can run at the same time and some interactivity such as zooming is possible.

- Compatible
Fully compatible with WPF, the graphics platform. NET and Vista. WPF has 3D and more. We can reuse a Web application in the local environment.

http://i751.photobucket.com/albums/x...ilverlight.jpg

Flash-killer :
The format of Adobe (formerly Macromedia) has become a sort of standard on the web. It allows you to run graphical applications on the browser after downloading a plugin. It is also used for Web applications, including the framework. Microsoft hopes to dethrone a product adapted to modern technologies of the Web. It is also a plugin, but lighter and it also works on major browsers. But Flash works on Linux, while Microsoft only provides a runtime for Windows and Mac. However a version of Silverlight for Linux started under the code name Moonlight on the site of Mono platform compatible. NETs.

Programming :
Microsoft offers a set of tools called Expression, the software equivalent of Adobe Creative Suite. Visual Studio can also generate Silverlight applications.
The Silverlight controls can be used in different ways: they are defined with a tag OBJECT or EMBED with JavaScript or by loading a XAML file, or a XAML content is created dynamically. Once defined, the object is used with JavaScript.

Platforms recognized :
- Windows XP with SP2.
- Windows 2000.
- Windows Vista.
- Windows Mobile.
- Macintosh.
- Linux under the name of Moonlight.


Creating a Silverlight project :
We begin the tutorial with the creation of a project for a Web application running in a browser, and requires the plug-in Silverlight.

1) Install the SDK
The Silverlight SDK includes a tutorial and documentation in English. The first step is to download and install it. See the instructions on the sheet Silverlight and the downloads page. Once it is installed, the browser can display web pages that have a rich graphical interface.

2) Create a directory
For example c: \ demo, or will put your project.

3) Copy the script
You will find the init script on the following path:

Code:

---

Program Files / Microsoft Silverlight 1.0 SDK / Tools / Silverlight.js / Silverlight.js

---

Copy it into the directory you just created. This script verifies that the system supports XAML. Eventually you can take the French localized version in the subdirectory "localized".

4) Create a Web page.
For example can use SampleHTMLpage.html in the directory QuickStarts \ quickstart \ samples \, but any page, created by Star Office for example, may agree. The example provided here is called mypage.html.

5) Insert the script
The script is inserted into the Web page with the following line, placed between the <head> and </ head>:

Code:

---

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

---

This has already been done in the file mypage.html which is linked above. You can also add a line to have your own script:

Code:

---

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

---

6) Create an ActiveX object
The program is inserted into the XAML page as ActiveX control. This requires a container, usually a <div>, and initialization code. We can actually create more controls, so many couples container / initializer. Practically we create the ActiveX control by adding a line in the Web page, between the <body> and </ body>:

Code:

---

<! - Where the Silverlight plugin Will Go ->
<div id="Control">
</ Div>

---

7) Set the ActiveX object in createSilverlight.js
Insert the code below after the previous line.

Code:

---

<script type="text/javascript">
 Silverlight.createObject (
    "tmcl.xaml"
    parentElement,
    "ControlID"
    (
        width: '300 '
        height: '300 '
        inplaceInstallPrompt: false,
        background: '# D6D6D6',
        isWindowless: 'false'
        framerate: '24 '
        version: '0 .9 '
    )
  (
        onError: null,
      onLoad: null
    )
    null
 )
</ Script>

---

8) Create the XAML source file
It is a simple text file, whose name, we have seen above will monxaml.xaml.
Unless you have used a different name by setting initialization ... The structure of a XAML file for Silverlight is:

Code:

---

<canvas Xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> ... </ Canvas>

---

You now have the following files:
- mypage.html
- Silverlight.js
- script.js (optional)
- xaml.xaml

First Program :
We begin with a simple example that displays the classic "Hi World!". You have already created a Silverlight project as the previous chapter, you have an HTML page, mypage.html, and the necessary files in the directory of your project.

1) Create a canvas
The XAML content to fit within the guidelines Canvas in Silverlight environment:

Code:

---

<Canvas 
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">     
</ Canvas>

---

2) Add a text block
The TextBlock tag allows you to place text in the canvas:

Code:

---

<TextBlock>
  Hello World!
</ TextBlock>

---

3) Define the attributes
You can choose the font, size, color and other text attributes.

Code:

---

<TextBlock
 FontFamily = "Verdana"
 FontSize = "20">
  Hello World!
"/ TextBlock>

---

4) The complete XAML

Code:

---

<Canvas 
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">     

 <TextBlock
  FontFamily = "Verdana"
  FontSize = "29">
    Hello World!
 </ TextBlock>
</ Canvas>

---

5) Show page
You can now view the page mypage.html with a browser, Internet Explorer, Firefox or another.


The Syntax of XAML :
XML syntax
XAML is a markup language derived from XML. The widgets are defined by tags open or closed, feature attributes.

Example of tag with content:

Code:

---

<TextBlock> A text </ TextBlock>

---

and without content:

Code:

---

<TextBlock />

---

The attributes are as variable assigned a value. In XML these values are put in quotes, as opposed to content that is either a text or one or more other tags.For example we give the name t1 with the Name attribute:

Code:

---

<TextBlock Name="t1" /> <TextBlock Name="t1"> A text </ TextBlock>

---

We will see that the tags can contain other tags, and even attributes can become beacons or vice versa, for example:

Code:

---

<TextBlock Text="some text />

---

Syntax properties :
An object properties, by which we mean that characterizes it, can be written as an attribute. For example, the background color property of a rectangle is written with the Fill attribute:

Code:

---

<Rectangle Fill="Red" />

---

In order to describe complex properties, XAML provides a format alternative called "Property element syntax (syntax element property), which extends the syntax of XML and gives new meaning to the point. In XML, the value of an attribute must be a string. In XAML, this can be another object of language. But it does not assign direct object to the attribute with the equal sign, is associated with a point by its own syntax for XAML that has the form:

Code:

---

Element.properties

---

Let's take the example of the Rectangle object and the Fill property is the fill color, becomes the attribute tags:

Code:

---

<Rectangle> <Rectangle.Fill> </ Rectangle.Fill> </ Button>

---

This lets you add tags and attributes to the Fill property, such as a texture made with a picture, what we will see later in this manual. Another example is provided by the language specification, one of which is assigned a button-down list:

Code:

---

<button> <Button.ContextMenu> <ContextMenu> <menuitem> Open </ MenuItem> <menuitem> Close </ MenuItem> </ ContextMenu> </ Button.ContextMenu> </ Button>

---

We see that ContextMenu, which is a menu list, becomes property of button with "Button.ContextMenu," and expresses Within the description of the button. The contents of a tag can be seen as property. Thus, the button text is a property which is written in such content or attribute value or text Content by subject:

Code:

---

<TextBlock Text="Some Text" />

---

Namespaces :
Namespaces are specificities as attributes of the container as overall file XAML Canvas or Window, or Page. These are predefined URL that will be given in the examples which correspond to the type of XAML definition.
Example:

Code:

---

<canvas Xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

---

For namespaces other than the default space (first line), the prefix (as x above) must precede each element of that namespace. In this case we will:

Code:

---

x: Nomel

---

For each element of the namespace x.


Properties attached :
It is a concept for XAML. The syntax is the same as the elements of property seen above, connects one property name to a type name (rather than an element name such as Button).

Code:

---

Type.properties

---

The goal is to add properties to a type. The elements of this type can then have the properties so defined.


Events attached :
In XAML, you can define an event by type, while the handlers are attached to objects represented by tags (such as Button). The syntax is always the same:
Type.environment


Extensions :
It is possible to extend the XAML using a special syntax: () is placed between the extension, consisting of a class name followed by the body.
Example from the language specification:

Code:

---

<TextBlock Style="{StaticResource Style}"> A text </ TextBlock>

---

The class contains definitions StaticResource added, and the body myStyle becomes a property of a button. We may use Button.Style in the definition of the button and take advantage of new opportunities implemented in the classroom.

Characteristic :
Sensitivity :
XAML is case sensitive. The initials of the words in capital letters must be preserved. This does not necessarily apply to attribute values, and true and true are eligible, if the parser recognizes them.

Whitespace :
The extra spaces are ignored, and special characters such as the code tab, equivalent to a space.

Root tag :
Like any XML document, a XAML definition must be enclosed within a single tag, called the root element. WPF for a page, the container is the tag page. For Silverlight, it is Canvas. For a local application is Windows.

Gadgets For SilverLight