Search
Author
ASP.NET Tutorials
Author
Sheo Narayan
Silverlight 4.0 Tutorials
Silverlight 1.0 Tutorials
Latest Articles
Winners

Win Prizes

Social Presence
Like us on Facebook
Silverlight Tutorials | Report a Bug in the Tutorial
Bookmark It
Silverlight Painting objects tutorials
Silverlight supports several types of brushes to fill an object with different color.
 
DEMO : Painting objects Show Source Code
SolidColorBrush
SolidColorBrush is used to fill an object with the specified color. In general when you specify the Fill property of the object, SolidColorBrush is used to fill the object. Here instead of creating a Rectangle.Fill child elelment you could have specified Fill property of the Rectangle object directly. 
<Canvas 
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">                    
   <Rectangle Canvas.Left="5" Canvas.Top="5" Height="100" 
        Width="100" Fill="Red" Stroke="Blue" StrokeThickness="3">
    <Rectangle.Fill>
      <SolidColorBrush Color="Red" />
    </Rectangle.Fill>
  </Rectangle>
</Canvas>
LinearGradientBrush and RadiantGradientBrush
These brush is used to fill the object with specific type of pattern.
LinearGraidentBrush is a gradient along a line. When it fills the color it starts from the top-left corner towards bottom-right corner. We can specify StartPoint and EndPoint to change the position of the line.

RadialGradientBrush is a graident along a circle. When it fills the color it starts from the center of the object. We can customize the position by specifying GradientOrigin. 
<Canvas 
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Canvas.Left="5" Canvas.Top="5" Height="150" Width="150" 
        Stroke="Blue" StrokeThickness="1">
    <Rectangle.Fill>
      <LinearGradientBrush>
        <GradientStop Color="Green" Offset="0.1"/>
        <GradientStop Color="White" Offset="0.25"/>
        <GradientStop Color="Blue" Offset="0.4"/>
        <GradientStop Color="Yellow" Offset="0.7"/>
        <GradientStop Color="Red" Offset="1.0"/>
      </LinearGradientBrush>      
    </Rectangle.Fill>
  </Rectangle>                      
  
  <Rectangle Canvas.Left="5" Canvas.Top="160" Height="150" Width="150" 
    Stroke="Blue" StrokeThickness="1">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Green" Offset="0.1"/>
        <GradientStop Color="White" Offset="0.25"/>
        <GradientStop Color="Blue" Offset="0.4"/>
        <GradientStop Color="Yellow" Offset="0.8"/>
        <GradientStop Color="Red" Offset="1.0"/>
      </LinearGradientBrush>      
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Canvas.Left="5" Canvas.Top="330" Height="150" Width="150" 
    Stroke="Blue" StrokeThickness="2">
    <Rectangle.Fill>
      <RadialGradientBrush>
        <GradientStop Color="Green" Offset="0.1"/>
        <GradientStop Color="White" Offset="0.25"/>
        <GradientStop Color="Blue" Offset="0.4"/>
        <GradientStop Color="Yellow" Offset="0.7"/>
        <GradientStop Color="Red" Offset="1.0"/>
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Canvas.Left="5" Canvas.Top="500" Height="150" Width="150" 
    Stroke="Blue" StrokeThickness="2">
    <Rectangle.Fill>
      <RadialGradientBrush GradientOrigin="0,0">
        <GradientStop Color="Green" Offset="0.1"/>
        <GradientStop Color="White" Offset="0.25"/>
        <GradientStop Color="Blue" Offset="0.4"/>
        <GradientStop Color="Yellow" Offset="0.7"/>
        <GradientStop Color="Red" Offset="1.0"/>
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>
ImageBrush
ImageBrush is used to fill an object with the specified image. By default the object is completely fill with the image. If you want to control how the image should be filled, you can specify the Stretch (Fill/Uniform/UniformToFill) property. 
<Canvas 
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle Canvas.Left="5" Canvas.Top="5" Height="150" Width="175" 
        Stroke="Blue" StrokeThickness="2">
        <Rectangle.Fill>
          <ImageBrush ImageSource="/images/inauguration_small.JPG" />
        </Rectangle.Fill>
      </Rectangle>
  </Canvas>