Source view of CANVAS.ASPX
DotNet Funda: Code Viewer
canvas.aspx | canvas.aspx.cs
Close Window  
    AutoEventWireup="true" CodeFile="canvas.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Canvas"
    Title="Silverlight Canvas 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 Canvas Tutorials</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                Canvas defines an area within which you can position child elements. Child elements
                can be anything like shapres, textblock etc.
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" runat="Server">
    <div class="ArticleContents">
        Every .xaml file must contain a canvas object and this servers as a root element.
        All child elements can be declared as inner XML. Following are some important properties
        that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <td class="DemoCP">
                    Background</td>
                <td>
                    Specifies the background color of the canvas.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Canvas.Left</td>
                <td>
                    Gets or sets the distance between the left side of the element from its parent element.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Canvas.Top</td>
                <td>
                    Gets or Sets the distance between the top side of the element from its parent element.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Canvas.ZIndex</td>
                <td>
                    Gets or sets the value of the Z-order object within the canvas.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Cursor</td>
                <td>
                    Gets or sets the cursor that displays when Mouse pointer is over the canvas.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Height</td>
                <td>
                    Gets or sets the height of the canvas object.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Width</td>
                <td>
                    Gets or sets the width of the canvas object.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Name</td>
                <td>
                    Gets or sets the unique name of the object.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    Opacity</td>
                <td>
                    Gets or sets the degree of the object's opacity (between 0 to 1.0 where 1.0 is the
                    full and 0 means transparent).
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    OpacityMask</td>
                <td>
                    Gets or sets the brush used to alter the opacity of the regions of the object.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    GetFocus</td>
                <td>
                    Occurs when the object gets focus.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    KeyDown</td>
                <td>
                    Occurs when any key is pressed while the object has focus.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    KeyUp</td>
                <td>
                    Occurs when any key is released while the object has focus.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">
                    LostFocus</td>
                <td>
                    Occurs when object looses the focus.
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle" style="width:50%;">
                    DEMO : Canvas Objects and its child objects
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/canvas.aspx"
                        target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr valign="top">
                <td>
                   This is a Simple canvas object with specified height and width.
                    <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;                    
    &lt;Rectangle Height="75" Width="150" Fill="LightBlue" Stroke="Green" 
        StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"&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 Height="50" Width="150" Fill="LightBlue" Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost1">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost1', '200', '75', '#xamlScript1')
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                Here you can see several child object inside the canvas object. By default, the ZIndex of the child element are determined in the sequence they are declared.
                    <pre>
    &lt;Canvas 
      xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
        &lt;Rectangle Height="30" Width="150" Fill="LightBlue" Stroke="Green" 
            StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"&gt;&lt;/Rectangle&gt;
         &lt;Rectangle Height="30" Width="150" Fill="LightGreen" Stroke="Blue" 
            StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"&gt;&lt;/Rectangle&gt;
        &lt;Rectangle Height="30" Width="150" Fill="LightPink" Stroke="Red" 
            StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"&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 Height="50" Width="150" Fill="LightBlue" Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
                        <Rectangle Height="50" Width="150" Fill="LightGreen" Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="25"></Rectangle>
                        <Rectangle Height="50" Width="150" Fill="LightPink" Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="45"></Rectangle>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost2">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost2', '200', '150', '#xamlScript2')
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                    Here the the same above code except that the ZIndex has been specified for all three objects. Notice the overlapping pattern of these three rectangles.
                    <pre>
    &lt;Canvas 
      xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
     &lt;Rectangle Height="30" Width="150" Fill="LightBlue" 
        Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"&gt;&lt;/Rectangle&gt;
     &lt;Rectangle Height="30" Width="150" Fill="LightGreen" 
        Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"&gt;&lt;/Rectangle&gt;
     &lt;Rectangle Height="30" Width="150" Fill="LightPink" 
        Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"&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 Height="50" Width="150" Fill="LightBlue" Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5" Canvas.ZIndex="3"></Rectangle>
                        <Rectangle Height="50" Width="150" Fill="LightGreen" Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="25" Canvas.ZIndex="2"></Rectangle>
                        <Rectangle Height="50" Width="150" Fill="LightPink" Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="45" Canvas.ZIndex="1"></Rectangle>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost3">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost3', '200', '150', '#xamlScript3')
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                    Below code demonstrate that you can declare many child canvas object inside a parent canvas object.
                    <pre>
    &lt;Canvas 
      xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
     &lt;Rectangle Height="30" Width="150" Fill="LightBlue" 
        Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"&gt;&lt;/Rectangle&gt;
     &lt;Rectangle Height="30" Width="150" Fill="LightGreen" 
        Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"&gt;&lt;/Rectangle&gt;
     &lt;Rectangle Height="30" Width="150" Fill="LightPink" 
        Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"&gt;&lt;/Rectangle&gt;
    &lt;/Canvas&gt;
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript4">
                    <?xml version="1.0"?>
                      <Canvas 
                        xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                        <Canvas Background="Green" Height="50" Width="50" Canvas.Left="10" Canvas.Top="10"></Canvas>
                          <Canvas Background="Red" Height="50" Width="50" Canvas.Left="100" Canvas.Top="50"></Canvas>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost4">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost4', '200', '150', '#xamlScript4')
                        </script>
                    </div>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" runat="Server">
</asp:Content>

Go Top