Seminar Internetdienste Thema: Silverlight

Transcription

1 Seminar Internetdienste Thema: Silverlight Zlatko Filipovski zlatko.filipovski [AT] uni-ulm.de Wintersemestar 2007

2 Contents 1 Overall Why was Silverlight created Silverlight 1.0 (JavaScript) Silverlight 2.0 (.Net Languages) The Initialization XAML XAML Elements Canvas Line TextBlock Rectangle Image MediaElement Elements Properties Width & Height Canvas.Left & Canvas.Top Name Storyboards & Animations Events Background Code Creating the Project Adding XAML Objects through the Code Accessing XAML Objects through the Code Deleting XAML Objects through the code 16 4 Summary 17 1

3 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 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

4 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 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 Application 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 Nodes in a certan time limit. The algorithm written in C# computes around Nodes in the same time limit. 3

5 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> <script 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 ></ script> <script 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 ></ script> </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 f u n c t i o n c r e a t e M y S i l v e r l i g h t P l u g i n ( ) { S i l v e r l i g h t. c r e a t e O b j e c t ( myxaml. xaml, // Source property value. parentelement, // DOM r e f e r e n c e to h o s t i n g DIV tag. m y S i l v e r l i g h t P l u g i n, // Unique plug in ID value. { // 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 in area in p i x e l s. height : 3 0 0, // Height o f r e c t a n g u l a r r e g i o n o f // plug in area in 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 to 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 in. iswindowless : f a l s e, // Determines whether to d i s p l a y // plug i n i n Windowless mode. framerate : 2 4, // MaxFrameRate property value. v e r s i o n : 1. 0 // S i l v e r l i g h t v e r s i o n to use. }, { onerror : null, // OnError property value // event handler f u n c t i o n name. onload : n u l l // OnLoad property value // event handler f u n c t i o n name. }, n u l l ) ; // Context value event // handler f u n c t i o n name. } 4

6 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> <script type= t e x t / j a v a s c r i p t > // R e t r i e v e the div element you c r e a t e d in the p r e v i o u s step. 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 the S i l v e r l i g h t plug in. c r e a t e M y S i l v e r l i g h t P l u g i n ( ) ; </ script> </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

7 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

8 2.1 XAML Elements 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 xmlns:x= h t t p : // schemas. m i c r o s o f t. com/ winfx /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 xmlns:x= h t t p : // schemas. m i c r o s o f t. com/ winfx /2006/ xaml > <Canvas MouseMove= DoSomething > <TextBlock>H a l l o</ TextBlock> <TextBlock Canvas. Top= 20 >World</ TextBlock> </ Canvas> </ Canvas> 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 <Line X1= 50 Y1= 50 X2= 100 Y2= 50 Stroke= Blue StrokeThickness= 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

9 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 /> 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 <Rectangle Width= 100 Height= 100 Canvas. L e f t= 20 Canvas. Top= 20 Background= Yellow /> 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] <Image Source= h a l l o. jpg /> Listing 2.6: Image Example - 1 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

10 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 Source= h a l l o. jpg Height= 100 Width= 50 Strech= F i l l /> Using this enables the Developer to create a better Web Experience, with a more stable layout of the Elements MediaElement Silverlight was designed to be a Rich Multimedia Experience, so naturally there is the possibility 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 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 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

11 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 xmlns:x= h t t p : // schemas. m i c r o s o f t. com/ winfx /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 > 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 xmlns:x= h t t p : // schemas. m i c r o s o f t. com/ winfx /2006/ xaml 10

12 > <TextBlock x:name= t ext1 Text= Hallo Canvas. Top= 20 Canvas. L e f t= 20 /> <TextBlock x:name= t ext2 Text= World Canvas. Top= 40 Canvas. L e f t= 40 /> <Canvas. T r i g g e r s> <EventTrigger RoutedEvent= Canvas. Loaded > <EventTrigger. Actions> <BeginStoryboard> <Storyboard x:name= Test > <DoubleAnimation Storyboard. TargetName= text1 Storyboard. TargetProperty= Canvas. L e f t To= 300 Duratation= 0 : 0 : 4. 2 /> <DoubleAnimation Storyboard. TargetName= text2 Storyboard. TargetProperty= Canvas. L e f t To= 300 Duratation= 0 : 0 : 3. 2 /> <DoubleAnimation Storyboard. TargetName= text2 Storyboard. TargetProperty= Canvas. Top To= 300 Duratation= 0 : 0 : 3. 2 /> </ Storyboard> </ BeginStoryboard> </ EventTrigger. Actions> </ EventTrigger> </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

13 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 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 xmlns:x= h t t p : // schemas. m i c r o s o f t. com/ winfx /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

14 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 namespace 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. structure of the functions that handle events usually looks like this: The Zoom f u n c t i o n ( sender, eventargs ) { } Listing 2.15: Event handling function in JS Listing 2.16: Event handling function in C# p u b l i c void MouseOver ( o b j e c t sender, 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

15 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 xmlns:x= h t t p : // schemas. m i c r o s o f t. com/ winfx /2006/ xaml x : C l a s s= RIA Gallery. Page ; assembly=clientbin / 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

16 } p u b l i c void Page Loaded ( o b j e c t o, EventArgs e ){ // Required to i n i t i a l i z e v a r i a b l e s I n i t i a l i z e C o m p o n e n t ( ) ; } } } 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 void Page Loaded ( o b j e c t o, EventArgs e ){ TextBlock t x t = new TextBlock ( ) ; txt. Text = C l i c k me to S t a r t ; t x t. MouseLeftButtonUp += new MouseEventHandler ( Start App ) ; txt. SetValue ( NameProperty, s t a r t t x t ) ; txt. SetValue ( LeftProperty, ) ; txt. SetValue ( TopProperty, ) ; t h i s. Children. Add( txt ) ; } 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# void Start App ( o b j e c t sender, MouseEventArgs e ){ s t r i n g xamlstring = <Image Source = img 1. jpg MouseLeftButtonUp= NextPic /> ; System. Windows. DependencyObject c o n t r o l s = XamlReader. Load ( xamlstring ) ; PicFrame. Children. Add( c o n t r o l s as Visual ) ; } 15

17 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# SolidColorBrush c o l o r = new SolidColorBrush ( ) ; c o l o r. Color = Colors. 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 ) as 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. Children [ 1 ] as 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. Children [ 1 ] as TextBlock ; t h i s. Children. Remove( tb as Visual ) ; 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

18 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

19 Bibliography [1] Main Page for Silverlight resources. [2] Link to the Silverlight SDK [3] Laurent Bugnion (GalaSoft) Personal Blog [4] Windows Presentation Foundation (WPF) 18