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:
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.|
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>
<Rectangle <span style="text-color:red">x:Name="ButtonOneRect"</span>
<Image <span style="text-color:red">x:Name="ButtonOneImage"</span>
<TextBlock <span style="text-color:red">x:Name="ButtonOneText"</span>
<span style="text-color:red">Text="Files" /></span>
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
, and MouseLeftButtonUp
The main differences between the container canvases for the individual buttons are the x:Name
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
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
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.
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)
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:
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:
element for ButtonTwoImage is "Search," so the base image for ButtonTwo is Search, and the two images used for ButtonTwo are images/Search.png
—in other words, paths that you can easily build up at run time using 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.
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.