10 Minute Tutorial - Silverlight: Hello World

Today, we will create a VERY basic “Hello World” Silverlight application. Since this is my first tutorial, as an experiment, I will break this tutorial up into three (hopefully self-explanatory) sections including: Prerequisites, QuickStart and Lesson. Over time, I will tweak my tutorial format based on your feedback. But, enough talk…let’s get started!

Update

As of September 2008, I have updated the prerequisites to the latest version of Silverlight

Prerequisites

Once you have these installed, you can test your Silverlight application by going to Microsoft’s Silverlight home page and seeing if all its content renders correctly.

QuickStart

If you want to see the end result of this tutorial and you have installed all the prerequisites, then please download this HTML file and open it in the appropriate browser:

You can see it in action, here

Lesson

Step 1: Create the HTML

Since Silverlight depends on the browser for delivery, it makes sense to first create an HTML page. So, let’s start with some very simple HTML. Create a file named hello.html and put this HTML in that file:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Silverlight Hello World</title>
   </head>
   <body>
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id=”testControl” width=”200″ height=”100″>
      </object>
   </body>
</html>

There. Doesn’t get any simpler than that :) . You’ll note that I did not include a DOCTYPE. As discussed by Microsoft Program Manager Mark Rideout, a bug in Firefox will prevent our control from rendering if we use a DOCTYPE in this tutorial. However, we will use it in later tutorials.

Step 2: Create the Silverlight Control

Similar to Flash, the Silverlight control lives as an embedded object in the page. Thus, we need to add the <object> tag:


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
  <head>
    <title>Silverlight Hello World</title>
  </head>
  <body>
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id=”testControl” width=”200″ height=”100″>
    </object>
  </body>
</html>
Step 3: Create the XAML

Now, that we have our Silverlight control created, we need to make it write out “Hello World!”. Silverlight renders UI elements declared in XAML (Extensible Application Markup Language). Let’s take a look a the XAML needed to render “Hello World”:


  <?xml version=”1.0″ ?>
  <Canvas xmlns=”http://schemas.microsoft.com/client/2007″>
    <TextBlock Text=”Hello World!” />
  </Canvas>

Pretty simple really. After the all too familiar XML declaration, we declare a Canvas control. Think of a canvas as similar to the client area of a window on your desktop. Although you can draw anything you want on it, its mainly lives to hold other controls. The TextBlock control simply declares a piece of text, and because our TextBlock resides within the Canvas declaration, our brilliantly original text should automatically appear within the Canvas.

So, where does this XAML go? For this simple example, we will use the inline XAML technique to declare the XAML directly within my HTML file like so:


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
  <head>
    <title>Silverlight Hello World</title>
  </head>
  <body>
  <!– Define XAML content. –>
  <script type=”text/xaml” id=”xamlContent”>
    <?xml version=”1.0″ ?>
    <Canvas xmlns=”http://schemas.microsoft.com/client/2007″>
      <TextBlock Text=”Hello World!” />
    </Canvas>
  </script>
  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id=”testControl” width=”200″ height=”100″>
  </object>
  </body>
</html>
Step 4: Render the XAML

Finally, with the XAML now declared, we need to tell my Silverlight control to use it. We do this by adding one parameter to our <object> tag:


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
  <head>
    <title>Silverlight Hello World</title>
  </head>
  <body>
    <!– Define XAML content. –>
    <script type=”text/xaml” id=”xamlContent”>
      <?xml version=”1.0″ ?>
      <Canvas xmlns=”http://schemas.microsoft.com/client/2007″>
        <TextBlock Text=”Hello World!” />
      </Canvas>
    </script>
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id=”testControl” width=”200″ height=”100″>
      <param name=”source” value=”#xamlContent” />
    </object>
  </body>
</html>

All done! If you open this HTML file, you should see a “Hello World!” appear at the top, left corner of your browser. If not, make sure you installed the Silverlight control properly.

Conclusion

In the next tutorial, we will dig deeper into Silverlight control construction and XAML. Till next time!

Share and Enjoy:
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • Reddit
  • del.icio.us
Related Posts:
4 JavaFX tutorials for beginners
10 Minute Tutorial - JavaFX: Hello World
Silverlight 2 Released!
10 Minute JavaFX Tutorial - Develop and deploy JavaFX Applets and Applications while online and offline

June 18, 2007 | Filed Under Tutorial, Silverlight 

Comments

Comments are closed.