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:
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:
Within the Text attribute of the element
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)
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)
The source property must be filled with the URL of the XAML file
The parentElement property must be filled with a reference to the DOM element that will hold the Silverlight content
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>
So, creating new Silverlight apps starts with copying and pasting most of the time. When creating new content, you need copies of the HTML file, the HTML JavaScript file, the XAML file, and, optionally, the XAML JavaScript file. Then you just have to update all file names and you are set. Therefore, we will only print the HTML file if it is beneficial to better understand the concept of a given example. We will also avoid reprinting the HTML JavaScript file if there is no special additional information in it. The code downloads for this book always come with complete, running code.
Figure 4-1 shows the default layout for text: the text uses the Lucida font, has a size of11 points, and is displayed in black. To make this possible, the font does not even have to be installed on the client (or on the server), it is part of the plugin. Therefore, the experience on Mac OS X is almost the same, as Figure 4-2 shows.
Apart from the Lucida font, several other fonts are also supported cross-platform:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Times New Roman
Trebuchet MS
Verdana
Other fonts, even if they are installed on the client, are not supported; Silverlight uses Lucida if the font name is invalid.
There are several ways to apply these fonts. First of all, some of the <TextBlock> attributes come in handy:
FontFamily The font family name (e.g., Arial)
FontSize The font size in points (e.g., 12)
FontWeight How to display the font (e.g., Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, and ExtraBlack; unfortunately, IntelliSense provides you with additional, invalid choices)
You can easily apply these attributes to a <TextBlock> element. However, if you would like to use different formattings in one <TextBlock>, you have another option. Use the <Run> element within <TextBlock> to provide inline formatting options. This concept can be compared to HTML: imagine <TextBlock> as a <div> element and <Run> as a <span> element within that <div> element. The styles of the <div> element provide the basic layout of the text within, but <span> styles may override <div> styles.
Example 4-4shows some styling options. It also introduces one new XAML element:
The <LineBreak> element
This element defines, well, a line break.
The Foreground attribute
This defines the foreground (here it is text) color. You can either use a defined color name (Red, Green, Blue, etc.), or an RGB tripled (#ff0000, #00ff00, #0000ff, ...), or you use aRGB. The “a” stands for alphatransparency: Just provide a value between 0 (00) and 255 (ff) that defines the degree of the nontransparency. If you set it to 00, the element is fully transparent (e.g., the background is seen, the element is not). If you set it to ff, the element is not transparent at all, so you do not see the background. If you use a value in between, the background shines through at the given degree. For instance, #7fffff00 is a yellow (ff0000) that is about 50 percent transparent (7f is hex for 127).
You can also provide the background color for an element, using the Background property.
Refer to Figure 4-3for the output in the browser.
Example 4-4. Text styling options, the XAML file (Text2.xaml)
It is possible to load external OpenType or TrueType (TTF) fonts and use them within a Silverlight application. Refer to Chapter 9 for details.
Wrapping Text
By default, the text contained in a <TextBlock> element does not wrap. However, by setting the TextWrapping property to Wrap, you can instruct Silverlight to automatically wrap the text for you. This of course makes most sends if you provide a fixed width for the text. For example:
<TextBlock Width="200" TextWrapping="Wrap" Text="This text will not fit in one line." />
Setting the TextWrapping property to NoWrap would disabled text wrapping, which is the default anyway.
Most typical Silverlight visual elements are shapes: geometrical elements that make up the visual experience of the application. This section will cover many of the available options.
Before we dive into the different supported shapes, we examine formatting options. There are several of them, and many of them are specific to certain shapes, but the following three properties are shared among all shapes:
Fill How to fill the inner area of a shape, e.g., by providing a color
Stroke How to paint the outline of a shape, e.g., by providing a color
StrokeThickness The width of the outline, in pixels (must not be an integral value)
We start with probably the easiest shape: a line, represented in XAML by the <Line> element. You need to provide the start and end point of the line and use the Silverlight coordinate system (which is pixel-based, the origin is in the top left corner). The associated attribute names are X1, Y1, X2, and Y1. Example 4-5 paints a simple triangle, using three lines, and Figure 4-4 shows the browser output. Note that thanks to the five pixelwidth of the strokes, the corners of the triangle are not perfect.
Example 4-5. A triangle with three lines, the XAML file (Line.xaml)
If you want to create a closed shape, such as a triangle, rectangle, and so on, you would be better off using the <Polygon> element, which combines all points. In the Points property, you need to provide a list of points, using this format:
X1,Y1 X2,Y2 X3,Y3 ... Xn,Yn
The rendering algorithm is as follows: the first point is connected with the second one, the second one with the third one, and so on; at some time point number n-1 is connected with point n. Finally, Silverlight connects point n with the very first point.
If you want to omit the final step, e.g., if you create a shape that is not closed because the last point is not connected with the first one, use <Polyline> instead of <Polygon>.
Example 4-6 once again creates the same triangle as before, but this time the cornersare much better, as Figure 4-5 shows. Since we cannot used alternating edge colorswhen using <Polygon>, we added an additional visual effect by setting the Fill property.
Example 4-6. A triangle as a polygon, the XAML file (Polygon.xaml)
A special case of a polygon is a rectangle, represented in Silverlight with the <Rectan gle> element. Here you do not provide the coordinates of all corners (or of the top left and bottom right corner), but have a different approach: you provide the width and height of the rectangle in its Width and Height attributes. The actual position of the rectangle is provided using the technique introduced in “Positioning Elements, so wewill omit this feature for now. However, we would like to showcase another feature of <Rectangle>: rounded corners.
A rounder corner is actually an ellipsis (which will get coverage of its own in a minute). You can now provide the radius of that ellipsis. If the horizontal and the vertical radius are the same, you get a circle, which is the most common option for a rounded corner. However, you can also provide different radius values to create a different visual effect. The attributes you need to use are RadiusX and RadiusY.
Figure 4-5.The (improved) triangle in the browser
Example 4-7 uses an ellipsis with an RadiusX:RadiusY ratio of 100:1. In Figure 4-6 you see the result: The rounded corners overlap a bit the two horizontal edges of the rectangle.
Example 4-7. A rectangle with rounded corners, the XAML file (Rectangle.xaml)
The final shape is also the most important one, especially if you have complex designs, such as a path, or the <Path> element. Its most important property is Data, which contains information defining the path. To tell the truth, it’s usually design tools that create paths, since any shape, regardless of how complex it is, can be transformed into a path. This section will provide you with a crash course of the path syntax.
Please check back next week for the continuation of this article.
Silverlight and XAML Basics
