Source view of PAINTING.ASPX
DotNet Funda: Code Viewer
painting.aspx | painting.aspx.cs
Close Window  
    AutoEventWireup="true" CodeFile="painting.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Painting"
    Title="Silverlight Painting tutorials : DotNetFunda.com" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left: 10px;" valign="middle">
                Silverlight Painting objects tutorials</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                Silverlight supports several types of brushes to fill an object with different color.
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" runat="Server">
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle" style="width:50%;">
                    DEMO : Painting objects
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/painting.aspx"
                        target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr valign="top">
                <td>
                   <b>SolidColorBrush</b><br />
                   SolidColorBrush is used to fill an object with the specified color. In general when you specify the <span class="DemoCP">Fill</span> property of the object, SolidColorBrush is used to fill the object.
                   Here instead of creating a <span class="DemoCP">Rectangle.Fill</span> child elelment you could have specified <span class="DemoCP">Fill</span> property of the Rectangle object directly.
                    <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;                    
   &lt;Rectangle Canvas.Left="5" Canvas.Top="5" Height="100" 
        Width="100" Fill="Red" Stroke="Blue" StrokeThickness="3"&gt;
    &lt;Rectangle.Fill&gt;
      &lt;SolidColorBrush Color="Red" /&gt;
    &lt;/Rectangle.Fill&gt;
  &lt;/Rectangle&gt;
&lt;/Canvas&gt;                    
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript1">
                    <?xml version="1.0"?>
                      <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" Stroke="Blue" StrokeThickness="3">
                        <Rectangle.Fill>
                          <SolidColorBrush Color="Red" />
                        </Rectangle.Fill>
                      </Rectangle>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost1">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost1', '200', '150', '#xamlScript1')
                        </script>
                    </div>
                </td>
            </tr>
             <tr valign="top">
                <td>
                   <b>LinearGradientBrush and RadiantGradientBrush</b><br />
                   These brush is used to fill the object with specific type of pattern.<br />
                    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 <span class="DemoCP">StartPoint</span> and <span class="DemoCP">EndPoint</span> to change the position of the line. <br /><br />
                    
                    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 <span class="DemoCP">GradientOrigin</span>.
                    <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
&lt;Rectangle Canvas.Left="5" Canvas.Top="5" Height="150" Width="150" 
        Stroke="Blue" StrokeThickness="1"&gt;
    &lt;Rectangle.Fill&gt;
      &lt;LinearGradientBrush&gt;
        &lt;GradientStop Color="Green" Offset="0.1"/&gt;
        &lt;GradientStop Color="White" Offset="0.25"/&gt;
        &lt;GradientStop Color="Blue" Offset="0.4"/&gt;
        &lt;GradientStop Color="Yellow" Offset="0.7"/&gt;
        &lt;GradientStop Color="Red" Offset="1.0"/&gt;
      &lt;/LinearGradientBrush&gt;      
    &lt;/Rectangle.Fill&gt;
  &lt;/Rectangle&gt;                      
  
  &lt;Rectangle Canvas.Left="5" Canvas.Top="160" Height="150" Width="150" 
    Stroke="Blue" StrokeThickness="1"&gt;
    &lt;Rectangle.Fill&gt;
      &lt;LinearGradientBrush StartPoint="0,0" EndPoint="1,0"&gt;
        &lt;GradientStop Color="Green" Offset="0.1"/&gt;
        &lt;GradientStop Color="White" Offset="0.25"/&gt;
        &lt;GradientStop Color="Blue" Offset="0.4"/&gt;
        &lt;GradientStop Color="Yellow" Offset="0.8"/&gt;
        &lt;GradientStop Color="Red" Offset="1.0"/&gt;
      &lt;/LinearGradientBrush&gt;      
    &lt;/Rectangle.Fill&gt;
  &lt;/Rectangle&gt;
  
  &lt;Rectangle Canvas.Left="5" Canvas.Top="330" Height="150" Width="150" 
    Stroke="Blue" StrokeThickness="2"&gt;
    &lt;Rectangle.Fill&gt;
      &lt;RadialGradientBrush&gt;
        &lt;GradientStop Color="Green" Offset="0.1"/&gt;
        &lt;GradientStop Color="White" Offset="0.25"/&gt;
        &lt;GradientStop Color="Blue" Offset="0.4"/&gt;
        &lt;GradientStop Color="Yellow" Offset="0.7"/&gt;
        &lt;GradientStop Color="Red" Offset="1.0"/&gt;
      &lt;/RadialGradientBrush&gt;
    &lt;/Rectangle.Fill&gt;
  &lt;/Rectangle&gt;
  
  &lt;Rectangle Canvas.Left="5" Canvas.Top="500" Height="150" Width="150" 
    Stroke="Blue" StrokeThickness="2"&gt;
    &lt;Rectangle.Fill&gt;
      &lt;RadialGradientBrush GradientOrigin="0,0"&gt;
        &lt;GradientStop Color="Green" Offset="0.1"/&gt;
        &lt;GradientStop Color="White" Offset="0.25"/&gt;
        &lt;GradientStop Color="Blue" Offset="0.4"/&gt;
        &lt;GradientStop Color="Yellow" Offset="0.7"/&gt;
        &lt;GradientStop Color="Red" Offset="1.0"/&gt;
      &lt;/RadialGradientBrush&gt;
    &lt;/Rectangle.Fill&gt;
  &lt;/Rectangle&gt;
&lt;/Canvas&gt;
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript2">
                    <?xml version="1.0"?>
                      <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>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost2">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost2', '200', '700', '#xamlScript2')
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                <b>ImageBrush</b><br />
                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 <span class="DemoCP">Stretch (Fill/Uniform/UniformToFill)</span> property.
                
                    <pre>
&lt;Canvas 
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;Rectangle Canvas.Left="5" Canvas.Top="5" Height="150" Width="175" 
        Stroke="Blue" StrokeThickness="2"&gt;
        &lt;Rectangle.Fill&gt;
          &lt;ImageBrush ImageSource="/images/inauguration_small.JPG" /&gt;
        &lt;/Rectangle.Fill&gt;
      &lt;/Rectangle&gt;
  &lt;/Canvas&gt;
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript3">
                    <?xml version="1.0"?>
                      <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>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost3">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost3', '200', '200', '#xamlScript3')
                        </script>
                    </div>
                </td>
            </tr>
            
    </table>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" runat="Server">
</asp:Content>

Go Top