Channels ▼
RSS

Tools

Getting Started with XAML in Silverlight


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">
  <MediaElement Name="mediaElement" AutoPlay="True" Width="561" 
   Height="396.5" Canvas.Left="8" Canvas.Top="8" 
   Source="Video.wmv" Stretch="Fill" />
</Canvas>
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.

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video