Go to DotNetFunda.com
 Online : 714 |  Welcome, Guest!   Login
 
<<= Please see left side tutorials menu.
WPF Tutorials  Download Online Sessions Videos   Subscribe for Online Trainings  Ask Technical Question

ASP.NET Tutorials | Report a Bug in this Tutorial

Found interesting? Add this to:

| More

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 | Testimonials | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
General Notice: If you found plagiarised (copied) contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.
Copyright © DotNetFunda.Com. All Rights Reserved. Copying or mimicking the site design and layout is prohibited. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks. | 9/3/2010 4:05:38 AM