Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Catching the (Silver) Light : Page 5

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


advertisement
Modifying the XAML
The XAML file for the sample page contains:

  • A rectangle the size of the outer canvas used to cause the "MouseExitCanvas" function, which lets you restore a Pressed button state as discussed earlier.
  • Two Lines that delineate the upper and lower borders of the navigation bar.
  • One Canvas for each of the five buttons. These canvases are identical except for naming, placement, image name, and text.
The outer rectangle is:

<Rectangle Canvas.Left="0" Canvas.Top="0" Width="500" Height="300" Stroke="White" StrokeThickness="1" MouseLeave="MouseExitCanvas" />

This places a single-pixel, white-bordered rectangle at the outermost pixel all the way around the outer canvas. The only purpose for this rectangle is the MouseLeave handler definition. If the mouse leaves the rectangle, it is off the canvas and that causes problems if you do not handle it properly.

Because the background of the page is white, setting the Stroke color of this Rectangle to white makes it invisible.

The two delineation lines are:

Using the '.5' locations for the delineation lines is a trick to avoid antialiasing of the 1-pixel line into effectively 2 pixels.

<Line Stroke="lightgray" StrokeThickness="1" X1=".5" Y1="2.5" X2="455.5" Y2="2.5"/> <Line Stroke="lightgray" StrokeThickness="1" X1=".5" Y1="37.5" X2="455.5" Y2="37.5"/>

These are 1-pixel width, light gray lines drawn across the canvas.

Each button canvas is similar to this one for ButtonOne:



<Canvas <span style="text-color:red">x:Name="ButtonOne"</span> <span style="text-color:red">Canvas.Left="5"</span> Canvas.Top="5" MouseEnter="MouseEnterButton" MouseLeave="MouseLeaveButton" MouseLeftButtonDown="LeftMouseDown" MouseLeftButtonUp="LeftMouseUp" Cursor="Hand"> <Rectangle <span style="text-color:red">x:Name="ButtonOneRect"</span> Width="70" Height="30" RadiusX="5" RadiusY="5" StrokeThickness="1" Stroke="White" Fill="White"/> <Image <span style="text-color:red">x:Name="ButtonOneImage"</span> Source="images/Save.png" Canvas.Left="3" Canvas.Top="3" Tag="Save"/> <TextBlock <span style="text-color:red">x:Name="ButtonOneText"</span> Canvas.Left="32" Canvas.Top="5" FontSize="16" Foreground="Black" <span style="text-color:red">Text="Files" /></span> </Canvas>

The red text highlights the only things that change from one button canvas to the next.

The template contains each of the buttons within a sub-canvas. This allows the main canvas to move while the objects contained within the canvas to move with it. The containing canvas also is the object that asserts the mouse events as shown: MouseEnter, MouseLeave, MouseLeftButtonDown, and MouseLeftButtonUp. All five button canvases point to the same JavaScript functions.

The main differences between the container canvases for the individual buttons are the x:Name and Canvas.Left location. Each button's top gets set to Canvas.Top="5", but they progress across the canvas with spacing controlled by the size of the artwork and text, determined at design time.

Each button has a round-cornered rectangle behind the artwork and text that the template fills with an off-white color when you roll over it and a yellow color when you press it. In addition, the template paints the rectangle border light gray when you press it. The Canvas.Left and Canvas.Top settings for the rectangle default to the container canvas, but the artwork and text control the width and height.

Each button has an Image object. For the images chosen, the Canvas.Left and Canvas.Top locations must all match. You use the Tag element of the Image object to hold the root name of the image being displayed.

Each button has a TextBlock. For the images chosen, the Canvas.Top value is consistent and the Canvas.Left value is dependent upon the artwork. All images use the same font size and colors. The text of the TextBlock is the displayed text that you associate with the artwork. This object is the only one that does not need a name in the current design, but it's assigned one just in case.

The canvas elements are named consistently to make it simple to not only navigate the XAML, but also to find the objects using JavaScript.

For instance, the container canvas of the first button on the left is named "ButtonOne." Furthermore:

  • The Rectangle is "ButtonOneRect."
  • The Image is "ButtonOneImage."
  • The TextBlock is "ButtonOneText."
When the template executes the LeftMouseDown handler, Silverlight passes it two values:

function LeftMouseDown(sender, args)

sender is the object that caused the handler to fire, and in the case of a mouse message, args contains the location of the mouse.

For example, sender.Name for the ButtonTwo container canvas is "ButtonTwo." The Rectangle associated with ButtonTwo is "ButtonTwoRect," and at run time, you can find the Rectangle using:

sender.Name + "Rect"

Similarly, the Image associated with ButtonTwo is "ButtonTwoImage."

Passing any valid object name to findName will return the object that has the specified name:

sender.findName("object name")

You build up the base image name used to switch images at run time as follows:

sender.findName(sender.name + "Image").Tag

In the case of ButtonTwo, sender.Name is "ButtonTwo," so this becomes:

sender.findName("ButtonTwoImage").Tag

The Tag element for ButtonTwoImage is "Search," so the base image for ButtonTwo is Search, and the two images used for ButtonTwo are images/Search.png and images/Search_h.png—in other words, paths that you can easily build up at run time using the Tag element value.

Using the object names and the Tag element of the Image object provides the capability to have only one set of button-agnostic JavaScript for handling the entire page. This not only makes the code smaller and easier to read, but makes extending the navigation bar simple.

Possible Enhancements
You could easily enhance this application. For example, you could set up a button or configuration element for "Large/Small" icons. You could easily handle having two sets of icons without changing the JavaScript by changing the Tag value for the Icon to be "SearchSmall," for instance—changing the font size for the TextBlock accordingly based on configuration selection. Similarly, you could work out choices for Icon-only or Text-only.

Tooltips might be an interesting puzzle because of interaction between the rollover state and enabling a tooltip canvas.

Adding a Tag element to each container canvas containing a page or URL could allow navigation from within the LeftMouseUp function, simply by reading the tag.

Conclusion
I hope I've shown you how easily you can use Silverlight 1.0 to extend your HTML or ASPX page into the next generation of usability without an exorbitant amount of effort or knowledge. Starting with a few simple XAML elements and expanding element by element allows you to incrementally test and build with the foreknowledge of success at each step.

Looking into the future, everything learned and used in this article is directly applicable to Silverlight 1.1, which lets you write managed code as well as JavaScript.



Dave Campbell is is a .NET developer currently employed by Minerva Engineering of Tempe, Arizona. He has over 30 years of experience in all segments of the software industry. Having spent the majority of his time working on UI issues, Silverlight is a good match to Dave's skill set, and Silverlight has become an all-encompassing "free time" exercise at WynApse.com and SilverlightCream.com.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap