Xaml and Javascript: Step 1: Create A New Project
Xaml and Javascript: Step 1: Create A New Project
I use Expression Blend 2.0 September preview for this tutorial. The preview can be downloaded from
http://www.microsoft.com/expression/products/download.aspx?key=blend.
You also need a trial of Visual Studio 2008. You can download a 90 days trial form
http://www.microsoft.com/downloads/details.aspx?FamilyId=83C3A1EC-ED72-4A79-8961-
25635DB0192B&displaylang=en.
Add a folder “Images” to the project and put the images pull.png and pants.png in the folder ( right click
Add existing item )
Place an image element at the bottom of the rectangle and choose the image pull or pants as source.
Name the element image picProduct.
Finally, choose the pen tool from the toolbox and draw a small holder for the label at the top of the
rectangle. Set the fill to none and the stroke thickness to 3.
Select all the elements on the canvas Page, right click on the selection and choose Group into canvas.
Name the canvas myLabel.
Select the rotation point ( white circle ) of the canvas and drag it to the top of the rectangle.
Create a new storyboard in the objects and timeline panel. Name the storyboard “mouseClicked” and
make sure the checkbox “create as resource” is checked because we will start the storyboard from code
behind with javascript.
Record a new keyframe at 0 seconds
Move the playhead to 0:00:300 seconds, and rotate the canvas -10 degrees ( use the transform section in
the property panel to rotate the canvas )
Move the playhead to 0:00:900 seconds and rotate the canvas 10 degrees.
Finally, move the playhead to 0:01:200 and set the rotation of the canvas to 0.
Create a second storyboard and name it mouseEntered.
Record a new keyframe at 0 seconds
Move the playhead to 0:00:300 seconds and place a new keyframe. Set the scale for X and Y to 1.1 in the
transform section of the property panel.
Right click the name of the storyboard in the objects and timeline panel and choose Duplicate.
Right click the name of the storyboard again and choose Reverse.
Right click the name of the storyboard one more time and choose Rename.
Name the new storyboard mouseLeft.
Save the project in Expression Blend and open it with Visual Studio 2008.
Open the file Page.xaml and you will see all the XAML code that Blend has created: the 3 storyboards and
all the elements for the label.
Add the eventhandlers to start the storyboards on the canvas myLabel:
Open the file Page.xaml.js and add this code at the bottom of the page.
Sender.getHost() addresses the silverlight component. The entire code searches for the storyboard with the
name mouseEntered, mouseLeft or mouseClicked. After the storyboard is found, it will be started.
Step 5: interaction between HTML and Silverlight
Open Default.html and add a form below the div that contains the Silverlight element. Of course you can add
style sheet to create a nice layout for this form.
<div class="settings">
<form method="post" action="">
<div class="part1">
<label>Product:</label><input type="text" id="product" />
<br />
<label>Price:</label><input type="text" id="price" />
</div>
<div class="part2">
<input type="radio" name="picture" value="pull" checked="checked"/>
<label>pull</label><br />
<input type="radio" name="picture" value="pants"/>
<label>pants</label>
<br /><br />
<input type="button" value="Create label" onClick="createLabel();" />
</div>
</form>
</div>
When the button is clicked, the function createLabel will be executed. We will create this function in the file
Page.xaml.js.
function createLabel()
{
// get all the values from the HTML form
var price = document.getElementById("price").value;
var product = document.getElementById("product").value;
var picture = document.getElementsByName("picture");
// test which radiobutton is checked
for(i=0;i<picture.length;i++)
{
if(picture[i].checked == true)
{
// create a variable that contains the path to the selected
image
var sSource = "Images/" + picture[i].value + ".png";
}
}
Press F5 to test the project, fill in the form and click the button.