Seminar Internetdienste Thema: Silverlight

Zlatko Filipovski

zlatko.filipovski [AT] uni-ulm.de

Wintersemestar 2007
Contents

1 Overall 2
1.1 Why was Silverlight created . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Silverlight 1.0 (JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Silverlight 2.0 (.Net Languages) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 The Initialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 XAML 6
2.1 XAML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.1 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.2 Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.3 TextBlock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.4 Rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.5 Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.6 MediaElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2 Elements Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.1 Width & Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.2 Canvas.Left & Canvas.Top . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.3 Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Storyboards & Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Background Code 14
3.1 Creating the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Adding XAML Objects through the Code . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3 Accessing XAML Objects through the Code . . . . . . . . . . . . . . . . . . . . . . . 16
3.4 Deleting XAML Objects through the code . . . . . . . . . . . . . . . . . . . . . . . . 16

4 Summary 17

1
Chapter 1

Overall

1.1 Why was Silverlight created

In a world where the Internet appears more frequently in our everyday lives, static web sites
composed only from text and pictures have become boring. A solution for this problem was the
creation of PHP. Suddenly it was possible for the Server to create dynamical web sites, depending
on the choices the user made. Still this wasn’t the best solution, because the server had to do all
the work. Through the creation of JavaScript, it was suddenly possible for the client to take over
a part of the workload. JavaScript allows the Developer to create a Code which will be executed
from the Browser on the Client side, and so change the look of the web page, without the need to
communicate with the Server. This allow for a more interactive and faster responding web pages.
Two big “problems” with JavaScript are that, it is really hard to program in it, and everybody can
see the JavaScript code.
Silverlight was created in order to replace JavaScript. Well “replace” is not really the right word
here, because Silverlight itself uses JavaScript code. The advantage of Silverlight over JavaScript is’s
not only the simpler art of programming, but also the highly advanced graphic part, which not only
allow for the creation of complicated animations but also for integrated multimedia support(images,
sound and video).
A Silverlight Application can be divided in to 4 parts:
• The Web Page that shows the Application
• The JavaScript function that initializes the Application
• The XAML file which contains the graphical part from the Application
• The background code for the Application
Currently (February 2008) there are 2 versions of Silverlight. The first version, Silverlight 1.0
was released in September 2007. At the same time there was an Alpha release of Silverlight 1.1,
now known as Silverlight 2.0. Both Silverlight version are identical in the first 3 parts. The only
difference (for now) between the two releases is in the background code.

1.2 Silverlight 1.0 (JavaScript)

The Code Behind the Silverlight Application in Silverlight 1.0 can be written in JavaScript. Being
so that JavaScript can be interpreted by almost every Browser, and the fact that it doesen’t need

2
to be previously compiled, a Silverlight 1.0 Application can be created from any computer with
only a text editor and it can be deployed to any kind of Web Sever. It can even be executed locally,
through the “file” protocol in the browser.
But all this advantages are bringing other disadvantages. Programming in JavaScript is not easy and
the debugging is complicated. Not only that, but JavaScript is slow. The first impression was that
Microsoft released Silverlight 1.0 in order to be the first to release a product with which Rich Internet
Application can be developed. But with time, Microsoft has shown (through different demos)that
Silverlight 1.0 is not a product version to get us to Silverlight 2.0, but actually a standalone Product.
Microsoft also declared that at this time, has no intentions to stop the developing of JavaScript as
the background code of Silverlight Applications.

1.3 Silverlight 2.0 (.Net Languages)

Silverlight 2.0 Beta 1 is due to be released in the first 3 Months from 2008. Until now it was
known as Silverlight 1.1, but Microsoft felt that with all the new features that will be coming with
this version, this should not be seen as just a minor release. This is just a naming strategy from
Microsoft. So the previously mentioned Alpha release from Silverlight 1.1 in Section 1.1, should
be seen as an Alpha release from Silverlight 2.0. From now on, in this paper, we would make no
distinction between 1.1 and 2.0. Silverlight 2.0 allows the usage of JavaScript as well as .NET
languages (like Visual C#, Visual Basic, IronRuby, Ironpython) for the background code. It also
has an following features that were not implemented Silverlight 1.0

• Managed Exception Handling

• Managed HTML Bridge
• Security Enforcement

• XMLReader/Writer
• others...
Due to the difference in structure between JavaScript and the .NET languages, Silverlight Applica-
tion in which the background code is written in .NET are usually much faster. For example: a Chess
Silverlight Application was written, in which the opponent can be simulated through an algorithm
written in JavaScript or in a C#. There is now diference in the structure of the algorithm, except
the language in which it was written. When the computer plays with the algorithm written in JS,
it manages to compute around 1.000 Nodes in a certan time limit. The algorithm written in C#
computes around 1.000.000 Nodes in the same time limit.

3
1.4 The Initialization
As already mentioned in Section 1.1 Silverlight itself uses JavaScript code, either as a background
code or to initialize itself. The Silverlight object written in JavaScript, which is used to initialize the
Application is a part of the Silverlight SDK (Software Development Kit) and can be downloaded
from [2]. This JavaScript file(usually called Silverlight.js) and contains all the information that are
necessary for the Plugin to be initialized and Silverlight objects to be created. Adding a reference
to this script file only gives you this possibility, but will not execute any code. The usual way to
reference this script into a web site is to add a reference between the head tags.

Listing 1.1: Referencing the JavaScripts

<head>
<s c r i p t type=” t e x t / j a v a s c r i p t ” src=” S i l v e r l i g h t . j s ”></ s c r i p t>
<s c r i p t type=” t e x t / j a v a s c r i p t ” src=” c r e a t e S i l v e r l i g h t . j s ”></ s c r i p t>
</head>

The “createSilverlight.js” is also a script file which contains a function for each Silverlight
Application on the web page. It usualy looks like this:

Listing 1.2: createSilverlight.js

function createMySilverlightPlugin ()
{
S i l v e r l i g h t . createObject (
”myxaml . xaml ” , // S o u r c e p r o p e r t y v a l u e .
parentElement , // DOM r e f e r e n c e t o h o s t i n g DIV t a g .
” mySilverlightPlugin ” , // Unique plug−i n ID v a l u e .
{ // Per−i n s t a n c e p r o p e r t i e s .
width : ’ 3 0 0 ’ , // Width o f r e c t a n g u l a r r e g i o n o f
// plug−i n a r e a i n p i x e l s .
height : ’300 ’ , // Height o f r e c t a n g u l a r r e g i o n o f
// plug−i n a r e a i n p i x e l s .
i n p l a c e I n s t a l l P r o m p t : f a l s e , // Determines whether t o d i s p l a y
// in−p l a c e i n s t a l l prompt i f
// i n v a l i d v e r s i o n d e t e c t e d .
background : ’#D6D6D6 ’ , // Background c o l o r o f plug−i n .
isWindowless : ’ f a l s e ’ , // Determines whether t o d i s p l a y
// plug−i n i n Windowless mode .
framerate : ’24 ’ , // MaxFrameRate p r o p e r t y v a l u e .
version : ’1.0 ’ // S i l v e r l i g h t v e r s i o n t o u s e .
},
{
onError : n u l l , // OnError p r o p e r t y v a l u e −−
// e v e n t h a n d l e r f u n c t i o n name .
onLoad : n u l l // OnLoad p r o p e r t y v a l u e −−
// e v e n t h a n d l e r f u n c t i o n name .
},
null ); // Context v a l u e −− e v e n t
// h a n d l e r f u n c t i o n name .
}

4
With the function “createMySilverlightPlugin” we can now start our Silverlight Application. All
we need to do is execute this function somewhere in our web page, and the script will do the rest.
Usually this is done like this:

Listing 1.3: Calling the constructor

...
<body>
...
<div id=” m y S i l v e r l i g h t P l u g i n H o s t ”>
</ div>
<s c r i p t type=” t e x t / j a v a s c r i p t ”>
// R e t r i e v e t h e d i v e l e m e n t you c r e a t e d i n t h e p r e v i o u s s t e p .
var parentElement =
document . getElementById ( ” m y S i l v e r l i g h t P l u g i n H o s t ” ) ;
// This f u n c t i o n c r e a t e s t h e S i l v e r l i g h t plug−i n .
createMySilverlightPlugin ( ) ;

</ s c r i p t>
...
</body>
...

The “div” Tag with the id “mySilverlightPluginHost” is being used as the Parent Element of
the Silverlight Application. This means that this is where the Silverlight Application will be placed.
The Parent Element is very useful at bigger web pages, because this way we can specify where the
Silverlight Application should appear.
There is also the possibility to put more then one Silverlight Application in one web page. All
that needs to be done is to create a function(constructor) “CreateMySecondSilverlightPlugin()” in
“createSilverlight.js” that is similar to the function “createMySilverlightPlugin”, and then put a
similar code to the web page like in Listing 1.3.

5
Chapter 2

XAML

Extensible Application Markup Language or XAML(it is pronounced “zammel”) is a an advanced

version of the Extensible Markup Language (XML) standard. In XAML (similar to XML) the user
has the ability to define his own elements. XAML was first used by the Windows Presentation
Foundation (WPF which was also developed by Microsoft) in order to create the User Interface
(UI), making the UI completely separated from the application code. Microsoft has conveniently
used XAML for Silverlight, making it easier for Developers and Designers to work together.
There are a couple of XAML elements that Silverlight already supports(like TextBlock,Image)
and its expected that a couple more will be added in the next released.
Here we will be talking about this couple of elements:
• Canvas

• Line
• TextBlock
• Rectangle

• Image
• Storyboard
Almost every element has following properties:
• Name

• Width (in px)

• Height (in px)
• Background
• ....

From now on we will be talking about Elements and Objects. The difference between this two
are that an Object is an already initialized Element which exist only during the runtime of the
Application. The Element is the Blueprint for every Object.

6
2.1 XAML Elements
2.1.1 Canvas
The Canvas is the primary element in the XAML(and Silverlight) structure. Just like an Artist
needs a Canvas(or something similar) to paint a picture, the Silverlight Designer needs his Canvas.
In the Silverlight XAML file, there is always a Canvas on the Top level from the XML hierarchy,
which contains the basic properties of the Silverlight Application and all other Objects.

Listing 2.1: Canvas Example - 1

<Canvas
xmlns=” h t t p : // schemas . m i c r o s o f t . com/ c l i e n t /2007 ”
x m l n s : x=” h t t p : // schemas . m i c r o s o f t . com/ w i n f x /2006/ xaml ”
>
<TextBlock>H a l l o</ TextBlock>
<TextBlock Canvas . Top=” 20 ”>World</>
</ Canvas>

A Canvas can also be added in another Canvas element, usually around a couple of elements who
are a Group. This way the Canvas can act similar as a layer in Photoshop, and allow the Designer
to easily set or change the properties of the elements in the Group. For example,by setting an Event
Trigger on the Canvas, it will automatically set the same Event Trigger on all the elements in the
Canvas.

Listing 2.2: Canvas Example - 2

<Canvas
xmlns=” h t t p : // schemas . m i c r o s o f t . com/ c l i e n t /2007 ”
x m l n s : x=” h t t p : // schemas . m i c r o s o f t . com/ w i n f x /2006/ xaml ”
>
<Canvas MouseMove=” DoSomething ”>
<TextBlock>H a l l o</ TextBlock>
<TextBlock Canvas . Top=” 20 ”>World</ TextBlock>
</ Canvas>
</ Canvas>

2.1.2 Line
A Line is one of the most basic elements in XAML. It is defined through the Start (X1,Y1) and the
End (X2,Y2) coordinates. The thickness of the Line is defined by the property “StrokeThickness”
and the Color of the Line by the property “Stroke”.

Listing 2.3: Line Example

...
<Li ne X1=” 50 ” Y1=” 50 ” X2=” 100 ” Y2=” 50 ”
S t r o k e=” Blue ” S t r o k e T h i c k n e s s=” 1 ” />
...

In the Listing 2.3 the Line will be Blue, 1px thick, will start from the coordinates (50,50) and will
end at (100,50), giving it a length of 50px.

7
2.1.3 TextBlock
The TextBlock is almost like in every other Programming Language. It is defined through the Size
(Width and Height), the Position (Canvas.Left and Canvas.Top) and the Text it has. There is also
the possibility to change the Font, FontSize, FontColor, change the BackgroundColor and others.

Listing 2.4: TextBlock Example

...
<TextBlock Text=” H a l l o World” Background=” Blue ” />
...

2.1.4 Rectangle
The Rectangle element describes a square or rectangle shape, optionally with rounded corners. It is
defined by its “Width” and “Height” and the corners of the Rectangle can be rounded by using the
“RadiusX” and “RadiusY” properties. The following code creates a Yellow Rectangle, with Width
100 and Height 100, starting at the (20,20) position in the Canvas

Listing 2.5: Rectangle Example

...
<R e c t a n g l e Width=” 100 ” Height=” 100 ”
Canvas . L e f t=” 20 ” Canvas . Top=” 20 ” Background=” Yellow ” />
...

2.1.5 Image
With the Image element you can easily display images in Silverlight. For now though, you can only
show “JPG” or “PNG” images. To display an image, all you need to do is set the Source property,
of the Image object, to the path of the image file source. This path can be relative or static. For
security reasons, Microsoft has disabled the possibility for Silverlight to access any files locally,
so the Source property must be on-line. This security feature makes programing and debugging
locally a somewhat difficult task. There are different tip’s on how to avoid this, but they will not
be explained here. For more information, check [3]

Listing 2.6: Image Example - 1

...
<Image S o u r c e=” h a l l o . j p g ” />
...

The Image in the Image Example 2.6 will be displayed on the (0,0) position on the Canvas, and
because the “Width” and “Height” properties are not specified in the Image object, it will have
it full size. That means that the “Width” and “Height” of the Image object, will be set to the
“Width” and “Height” of the Source. This will cause that the layout of our Web Page to be different
each time we change the Source of the Picture(unless the Pictures all have the same dimensions,
which is not so often). There is the possibility to set the “Height” and the “Width” properties
of the Image object manually, and then set the “Stretch” property to one of the following values:
“None”,”Fill”,”Uniform” or “UniformToFill”.

8
 Listing 2.8: Height & Width Example
...
<TextBlock Text=” h e l l o world ! ” Canvas . Top =” 0 ” />
<TextBlock Text=” h e l l o world ! ” Canvas . Top =” 100 ”
Width=” 5 ”>
<TextBlock Text=” h e l l o world ! ” Canvas . Top =” 200 ”
Width=” 100 ”>
...

Listing 2.7: Image Example - 2

...
<Image S o u r c e=” h a l l o . j p g ” Height=” 100 ” Width=” 50 ” S t r e c h=” F i l l ” />
...

Using this enables the Developer to create a better Web Experience, with a more stable layout
of the Elements.

2.1.6 MediaElement
Silverlight was designed to be a “Rich Multimedia Experience”, so naturally there is the possibil-
ity to play Videos or Audio. Currently supported formats are:“wmv” for videos and “mp3” and
“wma” for audio. The MediaElement is similar to the Image element, but has the extra methods
“Play”,”Pause” and “Stop”, which can be called from the background code, giving it the possibility
to pause and play the video or audio. Silverlight also has a full screen rendering support.

2.2 Elements Properties

2.2.1 Width & Height
The “Width” and “Height” are a part of the defining properties on every Object. Although the
Designer doesn’t always have to set them. If these properties are not set, then the default value
will be automatically defined by Silverlight. This means if we do not set the “Width” and “Height”
of a TextBlock or an Image, then Silverlight will do this, by setting them to the needed size. This
way, the Text or the Image will always be shown in there full size, making the whole Web User
Experience a little unpredictable.

2.2.2 Canvas.Left & Canvas.Top

This properties define the place where the upper left edge from the object will be in the Canvas.
Each element has the properties “Canvas.Top” and “Canvas.Left” with default value 0. Here is
the value expressed in px(pixel). This value can be changed on all elements by the code in the
background, while the Application is running, except on the Root Canvas. The “Canvas.Top”
and “Canvas.Left” properties are relative to the Canvas in which the element is in. So if we put
a Canvas,who starts at (100,100) , around the two TextBlock’s from Listing 2.1,in order to get
the same look as before, we got to edit the “Canvas.Top” and “Canvas.Left” properties of the
TextBlock’s. This way, if you want to change the location on the grouped elements in Listing 2.9,
instead on changing the “Canvas.Top” and “Canvas.Left” properties on all the elements, all you

9
 Listing 2.9: Canvas.Top & Canvas.Left
<Canvas
xmlns=” h t t p : // schemas . m i c r o s o f t . com/ c l i e n t /2007 ”
x m l n s : x=” h t t p : // schemas . m i c r o s o f t . com/ w i n f x /2006/ xaml ”
>

<Canvas MouseMove=” DoSomething ” Canvas . Top=” 0 ” Canvas . L e f t=” 0 ”>

<TextBlock>H a l l o</ TextBlock>
<TextBlock Canvas . Top=” 20 ”>World</ TextBlock>
</ Canvas>
</ Canvas>

need to do is to change the “Canvas.Top” and “Canvas.Left” property on the Canvas that surrounds
them. For example, if we want to move them all 100px to the right, all we need to do is change the
Canvas.Top from the Canvas that makes the Group.

Listing 2.10: Canvas Move

...
<Canvas MouseMove=” DoSomething ” Canvas . Top=” 0 ” Canvas . L e f t=” 100 ”>
...

2.2.3 Name
The Name is one of the more important properties of the Silverlight 2.0 elements. Although it
almost makes no difference in the XAML code, it is really important for the Code Behind. With
the help of the name, a Silverlight Object can be accessed and its properties changed after the
Application has been started (usually on triggered Events, Section 2.4).

2.3 Storyboards & Animations

Although not actually an element which can be seen in the Silverlight Application, Storyboards
can be written in the XAML file. A Storyboard changes a property of an object from one value
to another. This can happen instantly(which is no fun) or over a period of time, depending on
the Animation. Each Storyboard can have more then one Animation. An Animation has always
one target and one property of the target that needs to be animated. The target and property are
actually defined in the storyboard, but can be change in every Animation, so that a Storyboard
can access more then one object and change more then one property. There are 3 different kind of
Animation in Silverlight right now, “DoubleAniamtion”,”ColorAnimation” and “PointAnimation”.
They are all used in different situation, depending on the property that needs to be changed.
ColorAnimation is used when the property Color is(Background), Double when the property a
Number is(Width,Height...), and Point when the property a Point is.

Listing 2.11: Storyboard

<Canvas
xmlns=” h t t p : // schemas . m i c r o s o f t . com/ c l i e n t /2007 ”
x m l n s : x=” h t t p : // schemas . m i c r o s o f t . com/ w i n f x /2006/ xaml ”

10
 >
<TextBlock x:Name=” t e x t 1 ”
Text=” H a l l o ” Canvas . Top=” 20 ” Canvas . L e f t=” 20 ” />
<TextBlock x:Name=” t e x t 2 ”
Text=”World” Canvas . Top=” 40 ” Canvas . L e f t=” 40 ” />
<Canvas . T r i g g e r s>
<E v e n t T r i g g e r RoutedEvent=” Canvas . Loaded ”>
<E v e n t T r i g g e r . A c t i o n s>
<B e g i n S t o r y b o a r d>
<S t o r y b o a r d x:Name=” Test ”>
<DoubleAnimation
S t o r y b o a r d . TargetName=” t e x t 1 ”
S t o r y b o a r d . T a r g e t P r o p e r t y=” Canvas . L e f t ”
To=” 300 ”
D u r a t a t i o n=” 0 : 0 : 4 . 2 ”
/>
<DoubleAnimation
S t o r y b o a r d . TargetName=” t e x t 2 ”
S t o r y b o a r d . T a r g e t P r o p e r t y=” Canvas . L e f t ”
To=” 300 ”
D u r a t a t i o n=” 0 : 0 : 3 . 2 ”
/>
<DoubleAnimation
S t o r y b o a r d . TargetName=” t e x t 2 ”
S t o r y b o a r d . T a r g e t P r o p e r t y=” Canvas . Top”
To=” 300 ”
D u r a t a t i o n=” 0 : 0 : 3 . 2 ”
/>
</ S t o r y b o a r d>
</ B e g i n S t o r y b o a r d>
</ E v e n t T r i g g e r . A c t i o n s>
</ E v e n t T r i g g e r>
</ Canvas . T r i g g e r s>
</ Canvas>

When the Storyboard “Test” in the Listing 2.11 is started, it will try to find the objects with the
names “text1” and “text2” and then will start moving them simultaneous, “text1” to the left, and
“text2” diagonally to the left.

11
2.4 Events
Until now we only showed the graphic part from Silverlight, and there was almost no human
interaction available. But a Rich Internet Application will not be complete without User Interaction,
and for a UI to exist, Events are needed.
There are two different types of Events in Silverlight:
• input Events
• non-input Events
There are two ways to bind an event to an object. First possibility is through the XAML
file(Listing 2.13), when you define the object. The second possibility is through the code in the
background, but more on that in chapter 3. There a different events properties in the XAML
elements, but most of the elements have the following:
• MouseLeftButtonDown
• MouseLeftButtonUp
• MouseEnter
• MouseLeave
• MouseMove
• Loaded
When these events are triggered is self explaining. “MouseMove” when you move the Mouse over
the Object in which this Event is defined, the “Loaded” Event when the Object is loaded, and so
on.
We have already defined an Event Trigger in Listing 2.10. According to that, every time we go over
the Canvas with our Mouse, Silverlight will try to carry out the function “DoSomething” that is in
our JavaScript or .NET Code
But here comes the interesting part. How would Silverlight know where to find the function. In
Silverlight 1.0 this is fearly simple. Just add a reference of the “.js” file that contains the background
code to the header of the HTML file.
Listing 2.12: Reference to the background code in 1.0
< s c r i p t type=” t e x t / j a v a s c r i p t ” s r c=” BackgroundCode . j s ”></ s c r i p t>

In Silverlight 2.0 it’s a little different. Here the reference is not to the file that contains the
code, but rather to the compiled code, which is a “.dll” file. The reference is added in the XAML
file, as an Attribute in the root Canvas.
Listing 2.13: Reference to the background code in 2.0
<Canvas x:Name=” rootCanvas ”
xmlns=” h t t p : // schemas . m i c r o s o f t . com/ c l i e n t /2007 ”
x m l n s : x=” h t t p : // schemas . m i c r o s o f t . com/ w i n f x /2006/ xaml ”
x : C l a s s=” c l r −namespace:TestApp . Page ; assembly=Test . d l l ”
Width=” 640 ” Height=” 480 ” Background=” White ”
>
<Canvas x:Name=” picFrame ” OnMouseEnter=”Zoom” . . . />
</ Canvas>

12
The “x:Class” is an Attribute from the “xmlns”, which is why it has the “x:” prefix. “x:Class”
should contain two information: the name of a class, in this case (as in most) through the “names-
pace” defined, and also an URI (Uniform Resource Identifier) of the compiled code in “assembly”.
If the compiled code is in a sub folder, for example “compiledCode”, then the URI for the assembly
will change to “compiledCode/Test.dll”. The whole line will be:

Listing 2.14: Reference to the background code in 2.0

x : C l a s s=” c l r −namespace:TestApp . Page ; assembly=compiledCode / Test . d l l ”

So in Listing 2.13, Silverlight 2.0 will search for a function “Zoom” in the compiled file. The
structure of the functions that handle events usually looks like this:

Listing 2.15: Event handling function in JS

Zoom f u n c t i o n ( s e n d e r , e v e n t A r g s ) { . . . }

Listing 2.16: Event handling function in C#

p u b l i c v o i d MouseOver ( o b j e c t s e n d e r , EventArgs e ) { . . . }

A Function that handles an Event always hast the same two parameters. Of course depending
on the event the arguments type can variate, although this distinction is more noticeable in the
.NET languages.

13
Chapter 3

Background Code

In order to explain the background code more easily, we will try to create an Image Gallery in
Silverlight 2.0. The Gallery should do the following. When the page is first loaded, it should have
only a text which says “Click me to Start”. When it will be clicked, it should disappear and show
the first picture.

3.1 Creating the Project

As already mentioned, the background code in Silverlight 2.0 can be JavaScript or a .NET language.
Here we will use C#. The simplest way to create a Silverlight 2.0 Project is using Visual Studio
2008 and the Silverlight Software Development Kit (SDK). Both can be downloaded from [1]. By
creating a new Silverlight 2.0 Project in Visual Studio with the name “RIA Gallery”, Visual Studio
it self creates all 4 parts from the Silverlight Application as listed in Section 1.1, using a template
from the SDK. It will create a “TestPage.html” where the Silverlight Application will be(part 1),
“Silverlight.js” and “TestPage.html.js” (part 2), “Page.xaml” (part 3),and the“Page.xaml.cs” file
(part 4). The “html” file and the “js” files will be almost identical with the ones already shown in
Section 1.4 The XAML and C# files will look like this.

Listing 3.1: Page.xaml File

<Canvas xmlns=” h t t p : // schemas . m i c r o s o f t . com/ c l i e n t /2007 ”
x m l n s : x=” h t t p : // schemas . m i c r o s o f t . com/ w i n f x /2006/ xaml ”
x : C l a s s=” RIA Gallery . Page ; assembly=C l i e n t B i n / RIA Gallery . d l l ”
Width=” 640 ” Height=” 480 ” Background=” White ”
>
<Canvas x:Name=” PicFrame ” Width=” 400 ” Height=” 350 ”
Canvas . L e f t=” 100 ” Canvas . Top=” 100 ” />
</ Canvas>

Listing 3.2: Page.xaml.cs File

using . . .
namespace RIA Gallery {
p u b l i c p a r t i a l c l a s s Page : Canvas {
p u b l i c Page ( ) {
Loaded +=new EventHandler ( Page Loaded ) ;

14
 }
p u b l i c v o i d Page Loaded ( o b j e c t o , EventArgs e ) {
// Required t o i n i t i a l i z e v a r i a b l e s
InitializeComponent ( ) ;
}
}
}

The class Page which is defined in the code, which is a subclass from a Canvas class, is the Class
for the root canvas in our XAML file. This can be seen in the line
“x:Class=”RIA Gallery.Page;assembly=ClientBin/RIA Gallery.dll”” from the XAML.
The code in the background of a Silverlight Application will only be executed in two situation.
First situation is when an Event fires, that has already have a function that is binded to him
(Section 2.4). Second situation is when the Application is loaded, in which case, the constructor
“Page” is executed. When we are in the code, after we do some “calculation”, we usually want to
show our result, start a Animation or something similar. This can be done by changing values on
already created XAML objects, deleting objects or adding new objects.

3.2 Adding XAML Objects through the Code

There are two ways to add XAML objects from the code to the XAML. Visual Studio 2008 already
has the XAML Elements as Classes. So the creation of a TextBlock that says “Start”, starts on
the (200,200) pixel, and on a mouse click will call the function “Start App”, would look something
like this:

Listing 3.3: Creating XAML Objects in C#

p u b l i c v o i d Page Loaded ( o b j e c t o , EventArgs e ) {
...
TextBlock t x t = new TextBlock ( ) ;
t x t . Text = ” C l i c k me t o S t a r t ” ;
t x t . MouseLeftButtonUp += new MouseEventHandler ( Start App ) ;
t x t . SetValue ( NameProperty , ” s t a r t t x t ” ) ;
t x t . SetValue ( L e f t P r o p e r t y , 2 0 0 ) ;
t x t . SetValue ( TopProperty , 2 0 0 ) ;
t h i s . C h i l d r e n . Add( t x t ) ;
}

The second way to add XAML objects is through parsing an XAML string or file(see Listing 3.4.

Listing 3.4: Creating XAML Objects in C#

v o i d Start App ( o b j e c t s e n d e r , MouseEventArgs e ) {
s t r i n g xamlString =
”<Image S o u r c e =’ img 1 . jpg ’ MouseLeftButtonUp =’ NextPic ’/>” ;
System . Windows . DependencyObject c o n t r o l s = XamlReader . Load ( x a m l S t r i n g ) ;
PicFrame . C h i l d r e n . Add( c o n t r o l s a s V i s u a l ) ;
}

15
3.3 Accessing XAML Objects through the Code
There are 3 ways to access XAML Objects through the code. If the object is defined with name in
the XAML, and not added through the code, you can access it by simply typing its name. This is
how the code would look like,if we want to access the “PicFrame” Canvas and change its Background
color to Blue.

Listing 3.5: Finding XAML Objects in C#

S o l i d C o l o r B r u s h c o l o r = new S o l i d C o l o r B r u s h ( ) ;
c o l o r . C o l o r = C o l o r s . Blue ;
PicFrame . Background = c o l o r ;

The only exception to this rule is the root Canvas. Although we gave it a name, we cant access it
through it, because we are actually already in it. Instead, we access it through the variable “this”.
Another way is by using the “FindName” function on the Canvas Element. This only works if
the “x:Name” property on the object is defined.

Listing 3.6: Finding XAML Objects in C#

TextBlock tb = t h i s . FindName ( ” s t a r t t x t ” ) a s TextBlock ;

Another way is accessing the Children Array of the Canvas. Here you must know the order in which
the objects are, which sometimes can be complicated.

Listing 3.7: Finding XAML Objects in C#

TextBlock tb = t h i s . C h i l d r e n [ 1 ] a s TextBlock ;

3.4 Deleting XAML Objects through the code

After the TextBlock with the text “Click me to Start” has been clicked, we don’t need it anymore.
We can either set its “opacity” to 0, making it invisible, we can move him outside the visible part
of the canvas, or we can delete it. In order to delete something, we must first find it. After that
you just call the function “Children.Remove(object)” on the Canvas that has the object.

Listing 3.8: Deleting XAML Objects in C#

TextBlock tb = t h i s . C h i l d r e n [ 1 ] a s TextBlock ;
t h i s . C h i l d r e n . Remove ( tb a s V i s u a l ) ;

We can also delete everything thats inside a Canvas, with the function “Clear”. This is very useful
when we have objects that we don’t need, that are grouped in a Canvas, but we don’t want to
delete the Canvas. Deleting a Canvas, also deletes all the objects inside.

16
Chapter 4

Summary

A Silverlight Application can be inserted in to any Web Page, regardless of the Code in which
the Page is written. It doesn’t matter if the page is a normal HTML page, a page written in
PHP or ASP. The important part is the JavaScript code that initialize, after which the browser
searches for the Plug In on the Client PC and then interprets the XAML file and the (compiled)
code from the Application. The simple XAML structure allow for a “hardcore” Programmer that
has no designing experience to easily design his own UI. Also a Designer should have no problem
in creating the background code. Microsoft Expression Tools are also of a great use by creating
Silverlight Applications. The Silverlight Community is pretty big, and rapidly growing. I personally
can hardly wait for the Silverlight 2.0 Beta to come out

17
Bibliography

[1] Main Page for Silverlight resources.

http://silverlight.net/
[2] Link to the Silverlight SDK 1.1.
http://msdn.microsoft.com/vstudio/eula.aspx?id=c8bf88e7-841c-43fd-c63d-379943617f36
[3] Laurent Bugnion (GalaSoft)
Personal Blog
http://geekswithblogs.net/lbugnion/archive/2008/02/03/silverlight-debugging-in-http-from-
visual-studio-also-the-downloader.aspx
[4] Windows Presentation Foundation (WPF)
http://windowsclient.net/default.aspx

18