Source view of SCRIPTING.ASPX
DotNet Funda: Code Viewer
scripting.aspx | scripting.aspx.cs
Close Window  
    AutoEventWireup="true" CodeFile="scripting.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Scripting"
    Title="Silverlight Scripting and Mouse event 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">
                Scripting and Mouse event Tutorials</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                Silverlight supports JavaScript to interact with the its objects. Most of the mouse event supported by JavaScript are supported by Silverlight too.
            </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 : Scripting and Mouse event in Silverlight
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/scripting.aspx"
                        target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr valign="top">
                <td>
                   <b>MouseLeftButtonDown</b><br />
                   <span class="DemoCP">MouseLeftButtonDown</span> event fires when left mouse button is clicked on the object. This event is supported by almost all objects including <span class="DemoCP">Canvas</span>. You need to specify a JavaScript function that will fire when button is clicked.
                   <p>
                   <b><i>Normally, you don't need to specify parameters in the JavaScript function, however if you do, it looks same like an standard .NET parameters. The first parameter, sender is the element that sends the event. The second parameter args is an object that contains data about the event.</i></b>
                    </p>
                    <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;TextBlock FontSize="25" Text="Please Creating Silverlight objects dynamically Me" MouseLeftButtonDown="IAmClicked" /&gt;
&lt;/Canvas&gt;      

// JavaScript Code
function IAmClicked()
{
    alert("You have clicked me.");
}  
                    </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">
                        <TextBlock FontSize="25" Text="Please Click Me" MouseLeftButtonDown="IAmClicked" />
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost1">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost1', '200', '100', '#xamlScript1')
                        function IAmClicked()
                        {
                            alert("You have clicked me.");
                        }
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                   <b>Working with Properties of an object</b><br />
                   You can access the properties of the object into JavaScript too. For that you may write the function with parameters as stated above (in bold and italic).<br />
                   Here, in the first function I am setting the  <span class="DemoCP">foreground</span> property of the sender object and in the second function I am accessing the  <span class="DemoCP">Canvas.Top</span> property of the sender object and specifying its value.
                   <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;TextBlock FontSize="25" Text="Me me red :)" 
        MouseLeftButtonDown="ChangeColorOfTheText" /&gt;
    &lt;TextBlock FontSize="13" Canvas.Top="50" Text="Click to Change my Position" 
        MouseLeftButtonDown="ChangeMyPostion" /&gt;
&lt;/Canvas&gt;      

// JavaScript Code
function ChangeColorOfTheText(sender, args)
{
    sender.foreground = "Red";
    alert("Thanks for making me red:) \n\nThe first parameter is: " + sender + "\n\nThe second parameter is: " + args);
}

function ChangeMyPostion(sender, args)
{
    sender["Canvas.Top"] = 150;
}
                    </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">
                        <TextBlock FontSize="25" Text="Me me red :)" MouseLeftButtonDown="ChangeColorOfTheText" />
                        <TextBlock FontSize="13" Canvas.Top="50" Text="Click to Change my Position" MouseLeftButtonDown="ChangeMyPostion" />
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost2">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost2', '200', '250', '#xamlScript2')
                        function ChangeColorOfTheText(sender, args)
                        {
                            sender.foreground = "Red";
                            alert("Thanks for making me red:) \n\nThe first parameter is: " + sender + "\n\nThe second parameter is: " + args);
                        }
                        function ChangeMyPostion(sender, args)
                        {
                            sender["Canvas.Top"] = 150;
                        }
                        </script>
                    </div>
                </td>
            </tr>          
            <tr valign="top">
                <td>
                   <b>Commonly used Mouse Events</b><br />
                   Following are example of commonly used mouse event, like <span class="DemoCP">MouseEntered, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp</span>.
                   <p>
                   <b>MouseEntered</b> event is raised when mouse pointer enters inside the object area. <br />
                   <b>MouseLeave</b> event is raised when mouse pointer leaves object area. <br />
                   <b>MouseLeftButtonDown</b> event is raised when left mouse button is clicked. <br />
                   <b>MouseLeftButtonUp</b> event is raised when left mouse button is released button after clicking.<br />
                   </p>
                   <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
&lt;Rectangle Height="50" Width="150" Canvas.Left="10" 
    Canvas.Top="10" Fill="Yellow" Stroke="Green" StrokeThickness="10"
        MouseEnter="MouseEntered" MouseLeave="MouseLeft" 
        MouseLeftButtonDown="MouseDown" MouseLeftButtonUp="MouseUp"/&gt;
&lt;/Canvas&gt;   

// JavaScript Code
function MouseEntered(sender, args)
{
    sender.stroke = "black";
}
function MouseLeft(sender, args)
{
    sender.stroke = "green";
}
function MouseDown(sender, args)
{
    sender.fill = "red";
}
function MouseUp(sender, args)
{
    sender.fill = "yellow";
}
                    </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" Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Stroke="Green" StrokeThickness="10"
                         MouseEnter="MouseEntered" MouseLeave="MouseLeft" 
                          MouseLeftButtonDown="MouseDown" MouseLeftButtonUp="MouseUp"/>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost3">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost3', '200', '250', '#xamlScript3')
                        function MouseEntered(sender, args)
                        {
                            sender.stroke = "black";
                        }
                        function MouseLeft(sender, args)
                        {
                            sender.stroke = "green";
                        }
                        function MouseDown(sender, args)
                        {
                            sender.fill = "red";
                        }
                        function MouseUp(sender, args)
                        {
                            sender.fill = "yellow";
                        }
                        </script>
                    </div>
                </td>
            </tr> 
            <tr valign="top">
                <td>
                   <b>Retrieving objects by its name and setting properties</b><br />
                   Till now, we saw setting properties of the sender objects, but there might be situation where you want to set properties of different object other than the object that raised the event.
                   In this case, you will have to find the object you want property to set for and then set its property. To do that you need to use <span class="DemoCP">findName</span> method of the sender object.
                   <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="MouseDown"&gt;
    &lt;Rectangle x:Name="rectangle1" Height="50" Width="150" 
        Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Stroke="Green" StrokeThickness="10" /&gt;
&lt;/Canvas&gt;

// JavaScript Code
function MouseDown(sender, args)
{
    sender.findName("rectangle1").Fill = "green";
}
                    </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" MouseLeftButtonDown="MouseDown">
                        <Rectangle x:Name="rectangle1" Height="50" Width="150" Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Stroke="Green" StrokeThickness="10" />
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost4">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost4', '200', '250', '#xamlScript4')
                        function MouseDown(sender, args)
                        {
                            sender.findName("rectangle1").Fill = "green";
                        }
                        </script>
                    </div>
                </td>
            </tr> 
            <tr valign="top">
                <td>
                   <b>Creating Silverlight objects dynamically</b><br />
                   In order to create dynamically Silverlight object, you need to use <span class="DemoCP">createFromXaml</span> method of the Silverlight plug-in instance. You can get it either by using <span class="DemoCP">getHost</span> or by using <span class="DemoCP">document.getElelementById</span>.
                   <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="MouseDown" &gt;
&lt;TextBlock Foreground="Green" FontSize="15" Text="Create Rectangle"/&gt;
&lt;/Canvas&gt;

// JavaScript Code
function MouseDown(sender, args)
{
    var cntrl = sender.getHost();
    var obj = cntrl.content.createFromXaml(
            '&lt;Rectangle Height="150" Width="150" Fill="Green" Canvas.Left="10" 
            Canvas.Top="20" /&gt;');
    var canvas = sender;
    canvas.children.Add(obj);
}
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript5">
                    <?xml version="1.0"?>
                      <Canvas 
                        xmlns="http://schemas.microsoft.com/client/2007" 
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="MouseDown" >
                        <TextBlock Foreground="Green" FontSize="15" Text="Create Rectangle"/>
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost5">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost5', '200', '250', '#xamlScript5')
                        function MouseDown(sender, args)
                        {
                            var cntrl = sender.getHost();
                            var obj = cntrl.content.createFromXaml(
                                    '<Rectangle Height="150" Width="150" Fill="Green" Canvas.Left="10" Canvas.Top="20" />');
                            var canvas = sender;
                            canvas.children.Add(obj);
                        }
                        </script>
                    </div>
                </td>
            </tr>   
            <tr valign="top">
                <td>
                   <b>Controlling media or animation using JavaScript</b><br />
                   In order to control the animation of an object, you need to find the object that is animating and fire appropriate method. In this case I have declared a <span class="DemoCP">Name</span> property of the <span class="DemoCP">Storyboard</span>, finding it into my JavaScript function and firing <span class="DemoCP">Stop, Play, Pause</span> methods.
                   <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    
    &lt;Canvas.Resources&gt;
    
        &lt;Storyboard x:Name="animationControl" Storyboard.TargetName="rectangle2" 
            Storyboard.TargetProperty="(Canvas.Top)"  AutoReverse="False"&gt;
          &lt;DoubleAnimation RepeatBehavior="Forever" To="250" Duration="0:0:3" /&gt;
                &lt;DoubleAnimation Storyboard.TargetName="rectangle2" RepeatBehavior="Forever"
                   Storyboard.TargetProperty="(Rectangle.RenderTransform).Angle" 
                    From="0" To="360" Duration="0:0:1" /&gt;
        &lt;/Storyboard&gt;
        
      &lt;/Canvas.Resources&gt;
      
      &lt;Rectangle x:Name="rectangle2" Canvas.Left="50" Canvas.Top="25" Width="20" Height="25"&gt;
        &lt;Rectangle.Fill&gt;
          &lt;RadialGradientBrush&gt;
            &lt;GradientStop Color="white" Offset="0.2"/&gt;
            &lt;GradientStop Color="Blue" Offset="0.6"/&gt;
            &lt;GradientStop Color="Red" Offset="1.0"/&gt;
          &lt;/RadialGradientBrush&gt;
        &lt;/Rectangle.Fill&gt;
        &lt;Rectangle.RenderTransform&gt;
          &lt;RotateTransform Angle="20" /&gt;
        &lt;/Rectangle.RenderTransform&gt;
      &lt;/Rectangle&gt;
      &lt;TextBlock Canvas.Left="120" Canvas.Top="125" Text="Stop" 
        MouseLeftButtonDown="StopAnimation" /&gt;
      &lt;TextBlock Canvas.Left="120" Canvas.Top="75" Text="Play" 
        MouseLeftButtonDown="PlayAnimation" /&gt;
      &lt;TextBlock Canvas.Left="120" Canvas.Top="100" Text="Pause" 
        MouseLeftButtonDown="PauseAnimation" /&gt;
        
&lt;/Canvas&gt;

// JavaScript Code
function StopAnimation(sender, args)
{
    sender.findName("animationControl").stop();
}
function PlayAnimation(sender, args)
{
    sender.findName("animationControl").begin();
}
function PauseAnimation(sender, args)
{
    sender.findName("animationControl").pause();
}
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript6">
                    <?xml version="1.0"?>
                      <Canvas 
                        xmlns="http://schemas.microsoft.com/client/2007" 
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                            <Canvas.Resources>
                                <Storyboard x:Name="animationControl" Storyboard.TargetName="rectangle2" Storyboard.TargetProperty="(Canvas.Top)"  AutoReverse="False">
                                  <DoubleAnimation RepeatBehavior="Forever" To="400" Duration="0:0:3" />
                                        <DoubleAnimation Storyboard.TargetName="rectangle2" RepeatBehavior="Forever"
                                           Storyboard.TargetProperty="(Rectangle.RenderTransform).Angle" From="0" To="360" Duration="0:0:1" />
                                </Storyboard>
                              </Canvas.Resources>
                              
                              <Rectangle x:Name="rectangle2" Canvas.Left="50" Canvas.Top="25" Width="20" Height="25">
                                <Rectangle.Fill>
                                  <RadialGradientBrush>
                                    <GradientStop Color="white" Offset="0.2"/>
                                    <GradientStop Color="Blue" Offset="0.6"/>
                                    <GradientStop Color="Red" Offset="1.0"/>
                                  </RadialGradientBrush>
                                </Rectangle.Fill>
                                <Rectangle.RenderTransform>
                                  <RotateTransform Angle="20" />
                                </Rectangle.RenderTransform>
                              </Rectangle>
                              <TextBlock Canvas.Left="120" Foreground="Green" Canvas.Top="175" Text="Play" MouseLeftButtonDown="PlayAnimation" />
                              <TextBlock Canvas.Left="120" Foreground="Blue" Canvas.Top="200" Text="Pause" MouseLeftButtonDown="PauseAnimation" />
                              <TextBlock Canvas.Left="120" Foreground="Red" Canvas.Top="225" Text="Stop" MouseLeftButtonDown="StopAnimation" />                              
                      </Canvas>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost6">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost6', '200', '400', '#xamlScript6')
                        function StopAnimation(sender, args)
                        {
                            sender.findName("animationControl").stop();
                        }
                        function PlayAnimation(sender, args)
                        {
                            sender.findName("animationControl").begin();
                        }
                        function PauseAnimation(sender, args)
                        {
                            sender.findName("animationControl").pause();
                        }
                        </script>
                    </div>
                </td>
            </tr>                                 
    </table>

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

Go Top