RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Catching the (Silver) Light : Page 4

Find out how easy it is to add Silverlight 1.0 to your web pages with this step-by-step walkthrough.

Extending the Basic Canvas
So far, you've seen how to insert a basic Silverlight canvas into a web page. This part of the article extends that basic canvas into something more useful. Here's a scenario: Suppose you pick up a web template from one of the popular sites and want to use that as a master page. For example, you might want to add a toolbar to navigate between major sections of your site. Envision a master page with a header across the top. Just beneath it is a navigation bar, and below that is an area that contains the sub-page content.

To avoid making the HTML difficult to read, or confusing the Silverlight additions with part of the page content, this discussion simply extends the canvas you've already seen a bit and modifies the XAML to produce a sample navigation bar.

The navigation bar should:

  • Provide standard UI characteristics (clickable buttons with icons and text labels) for ease of use.
  • Write the XAML and JavaScript so that the object names from the XAML do not appear in the JavaScript, thus providing simple extensibility.
When you press a button on an application, a few things happen that largely go unnoticed—unless they're missing. These actions convince your eyes that a "button press" action has taken place, reinforcing the interaction between the mouse cursor and the button to expand the believability of the whole process.

To convince the eye that a button is "pressed," designers typically move the artwork down and to the right by one pixel. On elaborate desktop applications, the artwork may even show a different image when the button is depressed. You won't typically see this level of detail in a web application, but the down-and-right effect is fairly standard. You can easily see and test this by pressing down—but not releasing—the left mouse on a button, such as a submit button on a form. When you press the mouse button, you'll see the "pressed" state of the button. If you now pull the mouse away from the button area, the button will change back to the normal position and coloration. With the mouse still held down, you can move back and forth over the button artwork to see the state change. This is the best way to test your state changes as you work with new configurations of Silverlight.

One extra item comes into play in this situation: A button is only "clicked" if you press and release the mouse inside the button artwork. I can press down, pull away, move the mouse all around, and then move back inside the button, release it, and still expect the button action to take place. However, if I press down, move away from the button, and then release the mouse prior to returning to the button, no "click" action takes place.

These mouse/artwork interactions must take place in your navigation bar to live up to users' expectations.

Author's Note: It's not a requirement to provide rollover effects as the mouse crosses a button, but when using "flat" buttons, such as in IE7, providing a rollover is a good user experience.

With Silverlight, you must handle one more UI item—the case when the mouse exits the canvas completely. Because Silverlight runs entirely within the canvas area, this is a situation that leaves the mouse in an unknown state. The best you can do is to return the application to a default state and allow them to continue from there.

JavaScript handles this code in the HTML file using two functions and two local variables:

  • sender.CaptureMouse()—Forces an object to receive mouse messages even if the mouse is not inside the object. You need this to know what is going on with the mouse after a mouse press on a button.
  • sender.releaseMouseCapture()—Releases the forced capture of mouse messages by an object to make the mouse messages globally available.
  • sCaptured—A local string variable with the name of the object that has capture.
  • sState—A local string variable holding the name of the state the application is in. States used are "Normal," "Rollover," and "Pressed."
Using the functions and variables above in pseudo code, you can see what the JavaScript functions look like in this snippet:

      if this button has the mouse
         set state to "Pressed"
         set button display to pressed
         set state to "Rollover"
         set button display to rollover
      set button image to highlighted image
      if state is "Pressed"
         set button position to normal
      set button image to normal image
      set button display to normal
      set state to "Normal"
      Button captures the mouse
      Captured set to Button name
      State set to "Pressed"
      Set button display to pressed
      if state is "Pressed"
         set button position to normal
         execute button action
      button releases capture
      Captured set to blank
      State set to "Normal"
      set button display to normal
      Captured set to blank
      State set to "Normal"
You can see, for example, that the only way the button action gets executed is if a user releases the left mouse while in the Pressed state. Examining the MouseEnter and MouseLeave code shows that the state is Pressed only if the mouse is inside the button that has capture. Therefore, the logic resolves the problem surrounding pressing and moving the mouse before release.

You could have set the opacity of the outer Rectangle in this example to 0 and it would still pick up the MouseLeave message, yet be invisible to the user.
You can examine the other state and button interactions using this simplified code as well.

The JavaScript code in the HTML file has as many comments as it does lines of code, so it should be very easy to read. More important to this examination is how the JavaScript and XAML interact.

It's worth showing a few screen shots of the navigation bar in action before this discussion gets too detailed.

Figure 2 shows the navigation bar in its default state.

Figure 2: Navigation Bar in Default state.
As the mouse rolls over the "Configure" artwork or text, the navigation bar changes to show the "Configure" button highlighted as shown in Figure 3. The change is subtle: The image changes to a highlighted image and the background receives an off-white color.

Figure 3: Navigation Bar with "Configure" rollover state.
If you press down the mouse on the "Configure" artwork or text, the navigation bar changes to look like Figure 4.

Figure 4: Navigation Bar with "Configure" pressed state.
Now the template displaces the image, text, and rectangle to the right and down, the background becomes yellow, and you can see a detectable border around the artwork and text.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date