C# 2008 Programmer's Reference

Scripting the UI Using JavaScript

Insert the following highlighted code into the RoundButton Canvas control:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='640' Height='480'
 Background='White' x:Name='Page'>
 <Canvas
  Width='100' Height='100'
  Canvas.Top='8' Canvas.Left='8'>
  <Canvas
   Width='100' Height='100' x:Name='RoundButton'
   MouseLeftButtonDown='ButtonClicked'
   MouseLeftButtonUp='ButtonReleased'
   MouseLeave='ButtonReleased'>

In the Project window, double-click the Page.xaml.js file. Append the following block of code to the end of the file:

function ButtonClicked(sender, eventArgs) {
 if (sender.name == 'RoundButton') {
  //---Get a reference to the ellipse---
  var pressedEllipse = sender.findName('EllipsePressed');
  pressedEllipse.opacity = 1;
 }
}
function ButtonReleased(sender, eventArgs) {
 if (sender.name == 'RoundButton') {
  //---Get a reference to the ellipse---
  var pressedEllipse = sender.findName('EllipsePressed');
  pressedEllipse.opacity = 0;
 }
}

Finally, press F5 to test the application. Click the button and observe the effect (see Figure 19-34).

Figure 19-34

Silverlight 1.0

Animation is one of the core capabilities of Silverlight. The following sections describe how to perform simple animations in Silverlight 1.0.

Animation — Part 1

You can use the Timeline object to perform some simple animation. Figure 19-35 shows the page displaying an image. When the mouse hovers over the image, the image will expand. When you move the mouse away, the image returns to its original size.

Figure 19-35

Using Expression Blend 2, create a new Silverlight project and name it Animations. Add an Image element to the page (see Figure 19-36).

Figure 19-36

The XAML source of the page looks like this:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='640' Height='480' Background='White' x:Name='Page'>
 <Image Width='165' Height='220' Canvas.Top='70' Canvas.Left='71'/>
</Canvas>

Set the Source property of the Image control to reference an image (see Figure 19- 37).

Figure 19-37

In the Objects and Timeline window, click the + button (see Figure 19-38), use the default name of StoryBoard1, and click OK.

Figure 19-38

Click the Record Keyframe button (see Figure 19-39).

Figure 19-39

Move the yellow timeline (see Figure 19-40) to the 0:00.200 position and click the Record Keyframe button again.

If you like, you can magnify the timeline by setting the Timeline zoom to 500%.

Figure 19-40

With the Image element selected, select the Properties Inspector and expand the Transform section. Click on the Scale tab. Set both X and Y to 1.5 (see Figure 19-41).

Figure 19-41

Add a second timeline to the project, and use its default name of StoryBoard2.

Click the Record Keyframe button, and then in the Properties Inspector's Transform section, click on the Scale tab again. Set both X and Y to 1.5 .

Move the yellow timeline to the 0:00.200 position and click the Record Keyframe button again.

In the Properties Inspector's Transform section, click the Scale tab. This time set both X and Y to 1.

Switch the project to XAML view, and add the following highlighted code:

<Image
 Width='165' Height='220'
 RenderTransformOrigin='1,1'
 Source='turbinetechnology_1.jpg'
 x:Name='image'
 MouseEnter='MouseEnter'
 MouseLeave='MouseLeave'>
 <Image.RenderTransform>