XAML Basics

(Page 1 of 4 )

You may already be familiar with XAML, but if you're learning how to use Silverlight, you will want to check out this article, the first one in a three-part series, for all the subtleties involved. It is excerpted from chapter four of Essential Silverlight, written by Christian Wenz (O'Reilly, 2008; ISBN: 0596519982). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

XAML

XAML is an XML dialect, so we will use a lot of angle brackets throughout this book. In this chapter, we will have a look at the most important XAML elements. It is virtually impossible to cover them all in a book of this size, but we will present as many as possible to let you dive into XAML with maximum speed.

If you have already worked with XAML for WPF applications, you already know most of what is covered in this chapter (and most of Chapter 6, as well). However, there are some subtle differences: Silverlight does not support the full XAML format like WPF, but only a subset. Future versions of Silverlight will increase the percentage of supported elements and attributes, but some things just cannot work in a web browser as they do in a desktop application.

The root element of every XAML file is <Canvas>, which defines the area that holds the Silverlight content. “Positioning Elements will show other uses for the <Canvas> element. For now, just remember to put this element at the beginning of each XAML file and supply the correct namespaces as follows:

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

Using Text

The first example used for most technology is a variation of the Hello World example (see Chapter 2 for such an example). This chapter will start with something like Hello World as well: we will add text to the Silverlight content. The element used for this is <TextBlock> (which you have already seen in Chapter 2), and there are two ways to provide this text:

1. Within the Text attribute of the element
   
2. As a text node within the element

Example 4-1 uses the latter approach to output a simple text. Note that you will get a notice in Visual Studio that using text within <TextBlock> is not allowed, but Figure 4-1 proves that it works.

Example 4-1. Using simple text, the XAML file (Text1.xaml)

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

To repeat the structure of a Silverlight application from Chapter 2, you need two more files to make this example work in a web browser. First, you need a helper JavaScript file that initializes the Silverlight content, such as shown in Example 4-2. Since this JavaScript file is tied to an HTML file, it is dubbed “HTML code-behind” throughout this book. In any example captions, we refer to the file as the “HTML JavaScript file” (as opposed to “XAML JavaScript files,” which will be introduced in the next chapter).

Example 4-2. Using simple text, the HTML JavaScript file (Text1.html.js)

  function createSilverlight()
  {
    Silverlight.createObjectEx({
      source: ‘Text1.xaml’,
      parentElement: document.getElementById(‘SilverlightPlugInHost’),
      id: ‘SilverlightPlugIn’,
      properties: {
        width: '400',
        height: '300',
        background:'#ffffffff',
        isWindowless: 'false',
        version: '1.0'
      },
      events: {
        onError: null,
      }
    });
  }

Note the highlighted code elements:

1. The source property must be filled with the URL of the XAML file
   
2. The parentElement property must be filled with a reference to the DOM element that will hold the Silverlight content
   
3. The id property provides a value that JavaScript code may use to access the Silverlight content (see Chapter 8 for details)

Second, an HTML file is used as the primary page to be loaded in the browser. This file includes both the “HTML code-behind” file and the Silverlight.js helper file that is installed as part of the Silverlight SDK Visual Studio plugin (and is also part of the

Figure 4-1.  The text is displayed

downloads for this book, available at http://www.oreilly.com/catalog/9780596516116). The HTML page needs to contain a <div> container with the same ID that has been provided in the parentElement property. Finally, the page needs to call the previously defined createSilverlight() function. Example 4-3 has the full code, and Figure 4-1 shows the output―the text appears.

Example 4-3. Using simple text, the HTML file (Text1.html)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Silverlight</title>

    <script type="text/javascript” src="Silverlight.js"></script>
    <script type="text/javascript” src="Text1.html.js"></script>
  </head>

  <body>
    <div id="SilverlightPlugInHost”>
      <script type="text/javascript">
        createSilverlight();
      </script>
    </div>
  </body>
  </html>

Next: Using Text continued >>
 

More BrainDump Articles
More By O'Reilly Media

Comments On: XAML Basics

· This article is an excerpt from the book "Essential Silverlight," published by...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter four of Essential Silverlight, written by Christian Wenz (O'Reilly, 2008; ISBN: 0596519982). Check it out today at your favorite bookstore. Buy this book now.