Go to DotNetFunda.com
 Online : 2780 |  Welcome, Guest!   Login
 
<<= Please see left side tutorials menu.

  • Nominate yourself for "Agile Software Development using Scrum" online session for FREE, click here.

  • Download OOPS and ASP.NET Online training session video and PPT from here.

ASP.NET Tutorials | Report a Bug in this Tutorial

Interesting?   Share and Bookmark this

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>



About Us | The Team | Advertise | Contact Us | Feedback | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
General Notice: If you found copied contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.
All rights reserved to DotNetFunda.Com. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
(Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher)