XAML Brushes and Silverlight

In this conclusion to a three-part series on using Sliverlight and XAML, you will learn about the versatility of XAML brushes. 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.

Using Images

Although Silverlight is a vector-based technology, pixel images are supported too. The XAML element is (conveniently) named <Image>. Apart from the default properties, such as Canvas.Left, Canvas.Top, Height, and Width, <Image> needs to know which graphics to show. This information is provided in the Source property. You can use


Figure 4-11.  The pixel image within the Silverlight content

both local and remote URLs, and you can use two supported graphics formats: JPEG and PNG. Example 4-12 has the code, and Figure 4-11 shows the associated output.

Example 4-12. Using an image, the XAML file (Image.xaml)

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

When using images, you can also track the data transfer using JavaScript, as Chapter 9 shows.

{mospagebreak title=Using Brushes}

The final basic XAML elements used to design a static (i.e., non-moving) UI are brushes. A brush is used just like a “real” brush―you can paint. However, Silverlight brushes offer more: you can paint with color, you can paint gradients, you can paint images, you can even paint videos.

Brushes can be used as alternatives to attributes such as Background, Fill, or Stroke. However, you need to alter your syntax a bit. Instead of using the attribute, you use a sub element, <ElementYouWantToBrush.OldAttribute>. For example, filling a rectangle would look as follows:

  <Rectangle>
    <Rectangle.Fill>
      <!– brushes go here –>
    </Rectangle.Fill>
  </Rectangle>

The “easiest” brush is called SolidColorBrush because it only uses one solid color, there are no changes within the color or gradients. Actually, when using attributes like Back ground or Fill or Stroke as we have done so far in this book, we were implicitly using a SolidColorBrush. However, the alternative syntax works as well. Example 4-13 has the same output as Example 4-11 (Figure 4-10), but is using the <SolidColorBrush> element. Note how the color used by the brush is defined by its Color attribute.

Example 4-13. Using a solid color brush, the XAML file (SolidColorBrush.xaml)

  <Canvas  xmlns=http://schemas.microsoft.com/client/2007"
      xmlns:x="http:// schemas.microsoft.com/winfx/2006/xaml"
      Width="500" Height="500" Background="White">
    <Rectangle Canvas.Left="50" Canvas.Top="50" Width="200" Height="200"
               Canvas.ZIndex="5">
      <Rectangle.Fill>
        <SolidColorBrush Color="Red" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="100" Canvas.Top="100" Width="200" Height="200"
               Canvas.ZIndex="4">
      <Rectangle.Fill>
        <SolidColorBrush Color="Green" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="150" Width="200" Height="200"

               Canvas.ZIndex="3">
      <Rectangle.Fill>
        <SolidColorBrush Color="Yellow" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="200" Canvas.Top="200" Width="200" Height="200"
               Canvas.ZIndex="2">
      <Rectangle.Fill>
        <SolidColorBrush Color="Blue" />
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="250" Canvas.Top="250" FontSize="20"

               Text="Silverlight" Canvas.ZIndex="1"/>
  </Canvas>

{mospagebreak title=Using Brushes continued}

Brushes can do unique things. The most typical example is gradients. A common form of a gradient is a radial gradient: The gradient starts at a given origin (quite often the center of an object) and then goes radially to the borders of the object. You can define an arbitrary number of stop points: these are points where a certain color must be matched. So, all you need to do is to define the stop points and associated colors; Silverlight automatically calculates and draws all colors in between. The XAML element for the brush is <RadialGradientBrush>.

There are a few parameters that must be defined for this gradient:

Center

The center of the object. You need to provide values between 0 and 1 for both the x and the y coordinate. Silverlight then calculates the actual coordinates based on the dimension of the target object.

GradientOrigin

The center of the gradient. Again, provide values between 0 and 1 for both coordinates.

RadiusX, RadiusY

The x and y radius of the gradient, again as values between 0 and 1

Stop colors are defined using the <GradientStop> element. You need to provide the color (Color attribute), and the offset (Offset attribute, value between 0 and 1). Example 4-14 shows a radial gradient with thee stop colors, and Figure 4-12 has the output.

Example 4-14. Using a radial gradient, the XAML file (RadialGradientBrush.xaml)

  <Canvas xmlns=http://schemas.microsoft.com/client/2007"
      xmlns:x="http:// schemas.microsoft.com/winfx/2006/xaml"
    Width="600" Height="600">
    <Ellipse Width="600" Height="600" Stroke="Black">
      <Ellipse.Fill>
       
<RadialGradientBrush Center="0.5 0.5" GradientOrigin="0.33 0.67"
                             RadiusX="0.5" RadiusY="0.5">

          <GradientStop Color="Red" Offset="0"/>
          <GradientStop Color="Green" Offset="0.33"/>
          <GradientStop Color="Blue" Offset="0.67"/>
       
</RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
  </Canvas>

The other form of gradient is a linear gradient: The color change does not happen radially, but instead along a gradient axis. In the associated XAML element, <Linear GradialBrush>, you need to assign a start point and an end point, once again using values between 0 and 1, which are then mapped to the actual coordinates. Exam ple 4-15 shows <LinearGradialBrush> in action, and also includes a line and markers that represent the radial axis and the stop points (trust me with the values), as you can see in Figure 4-13 .

Example 4-15. Using a linear gradient, the XAML file (LinearGradientBrush.xaml)

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


Figure 4-12.  The radial gradient. Do you see the center and the stop colors?

Example 4-15. Using a linear gradient, the XAML file (LinearGradientBrush.xaml) continued

    <Rectangle Width="600" Height="600" Stroke="Black">
      <Rectangle.Fill>
       
<LinearGradientBrush StartPoint="0.1 0.9" EndPoint="0.9 0.1">
          <GradientStop Color="Red" Offset="0"/>
          <GradientStop Color="Green" Offset="0.33"/>
          <GradientStop Color="Blue" Offset="0.67"/>
       
</LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <Path Stroke="Black" Data="M 55 535 L 65 545 M 65 535 L 55 545" />
    <Path Stroke="Black" Data="M 215 375 L 225 385 M 225 375 L 215 385" />
    <Path Stroke="Black" Data="M 375 215 L 385 225 M 385 215 L 375 225" />
    <Line X1="60" Y1="540" X2="540" Y2="60" Stroke="#7f000000" />
  </Canvas>

A final brush option is to use a special “filling” for a brush: an image or a video file. So when you have an image to fill an object, Silverlight can automatically stretch the content so that it fits. You could also play a video as a background for a rectangle or within an ellipsis, just to give you a few ideas.

{mospagebreak title=Still More on Using Brushes}

Using both brushes, ImageBrush and VideoBrush, is quite similar. You have to provide the name of the source file in an associated attribute, which is called ImageSource for <ImageBrush> and SourceName for <VideoBrush>. You can instruct Silverlight on how to


Figure 4-13.  The linear gradient, with highlighted gradient axis and stop points

stretch the content so that it fits using the Stretch attribute, assigning one of these values:

None
  Content size remains the original one

Fill
   The content fills up the whole available area, loosing
   its aspect ratio

Uniform
   The content size is increased, maintaining the aspect
   ratio, until either the content has the width or the
   height of the display area

UniformToFill
   The content size is increased, maintaining the aspect
   ratio, until the content width and height are both
   greater or equal than the width and height of the
   display area. If necessary, parts of the content are
   cropped.

Example 4-16 shows an image that is used to fill an ellipsis. You can see in Figure 4-14 that this works as expected and that you can display rectangular image and


Figure 4-14.  The ellipsis is filled with the image brush

video content and use other shapes. More information on using video in general can be found in Chapter 7.

Example 4-16. Using an image brush, the XAML file (ImageBrush.xaml)

  <Canvas xmlns=http://schemas.microsoft.com/client/2007
      xmlns:x="http:// schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="300">
    <Ellipse Canvas.Top="75" Width="300" Height="150" Stroke="Black">
     
<Ellipse.Fill>
        <ImageBrush ImageSource="silverlight.png" />
      </Ellipse.Fill>
    </Ellipse>
  </Canvas>

An alternative approach to define the outline of an object is to use the Clip property and provide a Geometry object as its value, which will define the desired shape. Refer to the Silverlight SDK for more information (the topic is called “Silverlight Geometries Overview”).

There are many shapes in XAML, almost too many to keep track of, but we covered the most important ones. And, honestly, usually the UI comes out of a design tool; as a programmer, you just have to add functionality and we’ll start right away with that in the next chapter! 

One thought on “XAML Brushes and Silverlight

  1. This article is an excerpt from the book “Essential Silverlight,” published by O’Reilly. We hope you found it to be enjoyable and educational. Please let us know what you thought of it, and if you would like to see more content of this nature.

[gp-comments width="770" linklove="off" ]