|
DEMO : Scripting and Mouse event in Silverlight
|
Show Source Code
|
MouseLeftButtonDown
MouseLeftButtonDown event fires when left mouse button is clicked on the object. This event is supported by almost all objects including Canvas. You need to specify a JavaScript function that will fire when button is clicked.
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.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock FontSize="25" Text="Please Creating Silverlight objects dynamically Me" MouseLeftButtonDown="IAmClicked" />
</Canvas>
// JavaScript Code
function IAmClicked()
{
alert("You have clicked me.");
}
|
|
Working with Properties of an object
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).
Here, in the first function I am setting the foreground property of the sender object and in the second function I am accessing the Canvas.Top property of the sender object and specifying its value.
<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>
// 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;
}
|
|
Commonly used Mouse Events
Following are example of commonly used mouse event, like MouseEntered, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp.
MouseEntered event is raised when mouse pointer enters inside the object area.
MouseLeave event is raised when mouse pointer leaves object area.
MouseLeftButtonDown event is raised when left mouse button is clicked.
MouseLeftButtonUp event is raised when left mouse button is released button after clicking.
<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>
// 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";
}
|
|
Retrieving objects by its name and setting properties
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 findName method of the sender object.
<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>
// JavaScript Code
function MouseDown(sender, args)
{
sender.findName("rectangle1").Fill = "green";
}
|
|
Creating Silverlight objects dynamically
In order to create dynamically Silverlight object, you need to use createFromXaml method of the Silverlight plug-in instance. You can get it either by using getHost or by using document.getElelementById.
<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>
// JavaScript Code
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);
}
|
|
Controlling media or animation using JavaScript
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 Name property of the Storyboard, finding it into my JavaScript function and firing Stop, Play, Pause methods.
<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="250" 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" Canvas.Top="125" Text="Stop"
MouseLeftButtonDown="StopAnimation" />
<TextBlock Canvas.Left="120" Canvas.Top="75" Text="Play"
MouseLeftButtonDown="PlayAnimation" />
<TextBlock Canvas.Left="120" Canvas.Top="100" Text="Pause"
MouseLeftButtonDown="PauseAnimation" />
</Canvas>
// 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();
}
|
|
|