I hope I'm not presenting too much this time, but as you'll see it's hard to perform some of the tasks we're going to perform without introducing other concepts.
To that end, I'm going to give our Rectangle and TextBlock a name, making it identifiable from Java Script. We're also going to give our Java Script a little more work to do.
As with the previous Tutorial, I'm going to put the XAML up front:
<Rectangle x:Name="EnclosingRectangle" Width="300" Height="80" Stroke="Black" StrokeThickness="2" Fill="White" Cursor="Hand" MouseLeftButtonUp="MouseClicked"/>
<TextBlock x:Name="HelloOnly" FontSize="36" Canvas.Left="10" Canvas.Top="15" Foreground="Blue" Text="Hello" Cursor="Hand" MouseLeftButtonUp="MouseClicked"/>
<TextBlock x:Name="SilverlightOnly" FontSize="36" Canvas.Left="110" Canvas.Top="15" Foreground="Blue" Text="Silverlight" Visibility="Collapsed"/>
The Rectangle Object this time is visually identical to the last time, with only a couple additions:
- This is how an object is named in xaml. You can name objects anything you'd like, just for now don't duplicate any names :)
- I discussed Fill last time, in that it 'fills' the Rectangle object with color, and also makes the entire Rectangle surface handle the mouse event.
If you move the mouse around the canvas above, you'll see that once you get to the Stroke on the Rectangle (the border), you get the cursor change to the "Hand", and it doesn't change again until you exit the Rectangle. The Fill parameter helps us out there, particularly on the right-hand side where there is no text.
If you haven't done Tutorial 03, it would be useful to read through that to understand how big a deal it is that the Fill parameter provides us with this capability.
The "Hello" TextBlock is identical to the "Hello Silverlight" Textblock of the last 3 Tutorials, except for the Text change and the addition of a name as discussed above.
If you look at the XAML, you'll see there are two TextBlocks this time. The second is to the right of the first and contains the text "Silverlight", although it is not visible at first. This TextBlock is named as well, and for instructive purposes, I removed the Cursor and Mouse message from this one. It contains a new parameter:
- The choices for Visible are "Visible" and "Collapsed". In this case, our text is "Collapsed", therefore not visible.
The MouseLeftButtonUp Handler
Last time we displayed the object type name when the Mouse was clicked. Since we've named our objects this time, we can display the name of the object responsible for firing off the Mouse message.
We use the 'sender' of the function to find the object name, and then display it:
sender.toString() // Object type name, e.g. "Rectangle"
sender.Name.toString() // Object name, e.g. "MyRectangle"
This time we also make our Mouse Handler have a little more functionality. Remember the Visibility
parameter that was set to "Collapsed" on our second TextBlock? Well, through the power of the sender parameter, we set that Visibility parameter to "Visible" like this:
If you Click the left mouse button on the "Hello" Text or anywhere in the Rectangle, you'll first get the alert message telling you where you clicked the mouse, then after you press "OK" on that, you'll see the text "Silverlight" appear to the right of "Hello".
This Tutorial's Puzzler
You should see a trend starting... I like to resolve a problem using the likely solution and show how that might lead to an entirely different problem.
Prior to clicking anything, you can move the mouse all over inside the Rectangle, and the mouse is the "Hand" cursor, but once you have both TextBlocks showing, move the mouse around inside the rectangle. You'll see the cursor change to "Hand" once you enter the Stroke area, and because of the Fill on the rectangle, we have no 'dead zone' between the Stroke and the TextBlock... the LEFT TextBlock. Move the mouse over the right-hand TextBlock and what do you find? No "Hand" cursor! Why is that?
Remember the discussion in Tutorial 03 about the hierarchy of objects in the canvas... here's a working example of how that can be a problem for you. The right-hand TextBlock has no mouse handlers attached, and the cursor is not set for it. The bigger deal is that we don't even get our Rectangle mouse clicks... and that's because the TextBLock is sitting on top of the Rectangle.
This exact layering problem hit me in one of my latest versions of my animated menu, so it's definitely good information to keep in mind.
This page I think is about the right length, but we've covered a few fun things:
- Named Ojbects
- How to find the name of an object from Java Script
- How to use a named object in a mouse handler to change a parameter value
- How to make an object Visible and Invisible
- How filling a Rectangle object helps our mouse handling
- How to cause ourselves problems with receiving mouse messages
I think next time I'll talk about the Canvas as an Object and how we use that. I'll also introduce the Ellipse Object from which we get circles.
Keep having fun!