Dr. Dobb's | Getting Started with XAML in Silverlight

Getting Started with XAML in Silverlight

Declarative languages such as XAML provide a means of displaying data in more rich and engaging ways than HTML

March 24, 2008
URL:http://www.drdobbs.com/windows/getting-started-with-xaml-in-silverlight/206905307

Dan Wahlin is a .NET development instructor and architecture consultant at Interface Technical Training. Dan founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, and Web Services in Microsoft's .NET platform. Dan blogs at http://weblogs.asp.net/dwahlin and http://blogs.interfacett.com/dan-wahlins-blog.

The popularity of declarative markup languages has gradually increased since the initial release of HTML. This shouldn't come as a surprise to anyone given that markup languages let information be presented to end users without requiring any knowledge of a programming language. For years HTML has served as the declarative language of choice for presenting information to end users through a browser and it certainly isn't going anywhere in the near future. However, new declarative languages such as Extensible Application Markup Language (XAML) have emerged, providing an alternate means for displaying data in more rich and engaging ways than HTML is capable of doing.

In this article, I introduce the XAML language and describe several ways it can be used in Silverlight applications. The topics covered will focus on functionality available in Silverlight 1.0. Future articles will introduce new XAML features available in Silverlight 2.0.

What Is XAML?

Extensible Application Markup Language (XAML) was originally created for the Windows Presentation Foundation (WPF) technology released with .NET 3.0. WPF and XAML provide a way to integrate designers into the application development process and create rich and interactive desktop (and even Web) applications that can bind to a variety of data sources. The release of Silverlight 1.0 brought XAML to the world of rich internet application development. Silverlight exposes a subset of the XAML language found in WPF that can be run directly in the browser once the Silverlight plug-in has been installed.

So what exactly is XAML and why should you learn it? If you have any background in HTML, then you'll quickly learn that XAML is like HTML is many ways (although XAML follows the rules defined in the XML specification which means that it's stricter than standard HTML). For example, HTML relies heavily on <div> elements to position child objects. Although XAML doesn't provide a <div> element, other elements such as <Canvas> can be used to accomplish the same type of task. If you've already learned HTML then you'll find that learning XAML is similar although XAML is capable of doing many more things from animating and transforming objects to dynamically displaying shapes with custom gradients.

HTML can only do so much on its own which is why additional features such as JavaScript on the client-side and dynamic programming languages on the server-side have been created over the years. In Silverlight, 1.0 XAML relies on JavaScript in cases where dynamic events need to be raised and handled. Silverlight 2.0 ups the ante by adding support for several languages including VB.NET and C#.

Throughout the rest of this article I introduce several key aspects of XAML and demonstrate how you can use XAML elements and attributes in Silverlight applications.

Handling Layout in Silverlight

As mentioned previously, Silverlight 1.0 provides a Canvas element that acts as a container for child objects much like div elements act as containers in HTML. The Canvas element can be used to organize objects and define where and how the objects should be displayed. Silverlight 1.0 applications have a root Canvas element defined that includes a special XML namespace (see Listing One). This Canvas acts as the parent for all other objects placed into a Silverlight application.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
</Canvas>

Listing One: Using the Silverlight 1.0 Canvas element in an XAML file. This file would have a .xaml extension.

Additional Canvas elements can be nested inside of the root Canvas element as well. This is especially useful when your application has several different visual sections such as a header, content area and footer. By using different Canvas elements you can group related child controls quite easily. Listing Two shows an example of a nested Canvas element.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
  <Canvas Canvas.Left="10" Canvas.Top="10" 
    Height="300" Width="300">
     <!-- Child content goes here --> 
  </Canvas>
</Canvas>

Listing Two: Defining multiple Canvas elements in a XAML file.

Notice that it defines the height and width as well as where the child canvas should be positioned relative to its parent container. The Canvas.Left and Canvas.Top attributes are referred to as "attached properties" in the world of XAML programming. Their values are relative to the parent. In this case the child Canvas will be positioned 10 pixels from the left and 10 pixels from the top of the parent container.

By using Canvas elements appropriately within a Silverlight application you can easily position shapes, media, and text, and show/hide groups of objects easily.

Defining Shapes, Text, and Media

Although Silverlight provides a subset of the XAML language available in WPF, the different declarative elements and attributes available can accomplish a lot and provide functionality that simply isn't available in the HTML language. For example, different types of shapes such as rectangles, ellipses, and lines can be defined and displayed using XAML. Different types of backgrounds can be defined for shapes as well including gradients, images, and media clips. Listing Three demonstrates how a rectangle, ellipse, and line can be defined within a Canvas container.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
  <Canvas Canvas.Left="10" Canvas.Top="10" 
    Height="300" Width="300">
    <Rectangle Canvas.Top="25" Canvas.Left="25" 
     Width="200" Height="150" Fill="Navy" />
    <Ellipse Height="200" Width="200" 
     Canvas.Left="10" Canvas.Top="20" 
     Stroke="Black" StrokeThickness="3" Fill="Red"/>
    <Line X1="10" Y1="10" X2="10" Y2="300" 
     Stroke="Black" StrokeThickness="3" />
  </Canvas>
</Canvas>

Listing Three: Using XAML to define different shapes within a Canvas parent element.

A gradient can be provided for the rectangle's background by using XAML elements, such as LinearGradientBrush in Listing Four. In this case, the gradient begins with White and gradually change to Red. Radial gradients can also be defined using the RadialGradientBrush XAML element to provide interesting elliptical effects.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
  <Canvas Canvas.Left="10" Canvas.Top="10" 
    Height="300" Width="300">
    <Rectangle Canvas.Top="25" Canvas.Left="25" 
     Width="200" Height="150"
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
          <GradientStop Color="White" Offset="0.0" />
          <GradientStop Color="Red" Offset="0.75" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</Canvas>

Listing Four: Defining gradient backgrounds using the LinearGradientBrush element.

Images can also be used as a shape's background by using the ImageBrush element, as in Listing Five. The ImageBrush element lets an image source be defined using the ImageSource attribute, and also allows control over how the image is drawn within its container through the Stretch attribute.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
  <Canvas Canvas.Left="10" Canvas.Top="10" 
    Height="300" Width="300">
    <Rectangle Canvas.Top="25" Canvas.Left="25" 
     Width="200" Height="150"
      <Rectangle.Fill>
       <ImageBrush ImageSource="Images/Fancy.jpg" Stretch="Uniform" />
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</Canvas>

Listing Five: Setting a Rectangle's fill to an image using the ImageBrush element.

Valid ImageBrush Stretch attribute values are shown next:

None. The content does not stretch to fill the output dimensions.
Fill. The content is scaled to fit the output dimensions. Because the content's height and width are scaled independently, the original aspect ratio of the content might not be preserved.
Uniform. The content is scaled to fit the output dimension and the aspect ratio of the content is preserved.
UniformToFill. The content is scaled to fill the output area while preserving its original aspect ratio.

In addition to shapes, text can also be defined using the TextBlock element as in Listing Six. If you've used the ASP.NET Label control before then you'll probably find the TextBlock element to be similar in many ways.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
	<TextBlock Name="tbCanvas"
            Canvas.Left="10" Canvas.Top="10"
            Foreground="Green" FontFamily="Tahoma" 
            FontSize="14" FontWeight="Bold" 
            Text="Hello World">
	</TextBlock>
</Canvas>

Listing Six: Defining text using the XAML TextBlock element.

Silverlight 1.0 really shines when it comes to its ability to embed different types of media within a canvas. Using the MediaElement XAML tag you can easily allow MP3 or WMA files to be played or display WMV video files. Listing Seven is an example of using the MediaElement object to embed media in a XAML canvas. MediaElement lets the media source be defined using the Source element and can even be used to specify if the media should automatically play or not by using the AutoPlay attribute.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
  Width="577" Height="480">
  

Listing Seven: Embedding a WMV file within a Silverlight canvas using MediaElement.


Summary



Learning XAML is much like learning HTML; you have to learn the different tag names and understand how tags can be nested within parent containers.  Once you know the available elements and attributes it's relatively easy to create a XAML file.  



In this article, I provided an introductory look at the XAML language and showed how layout containers can be used to group related child objects. It also demonstrated how different types of shapes can be defined, how text can be output and how media can be played. There's much more to XAML than the introductory topics I discuss here. For a complete listing of all XAML elements and attributes, download the Silverlight 1.0 SDK.
        
Terms of Service | Privacy Statement | Copyright ©  2024 UBM Tech, All rights reserved.