WynApse Home Page
Home    Blog    About    Contact       
Latest Article:

My Tags:
My Sponsors:

Lifetime Member:

Silverlight With Java Script Tutorial 03 - Rectangles, TextBlocks, and Mouse Clicks


Up to now, there have been two Tutorials, but really only one Canvas. I wanted to ease into the whole HTML/XAML idea and hopefully get more people quickly involved. There's lots yet to explore, so I thought I'd look a little at the Rectangle object this time, and also take a first look at handling some mouse events. This will get us into Java Script, and if you're not familiar with it, don't worry, it's very minimal, and just a cut-and-paste :)


I thought I'd throw the XAML for this page right up front, so it can be easily referenced in comparison to the running page, plus we'll be referring to pieces of it as we go.


<Rectangle Width="300" Height="80" Stroke="Black" StrokeThickness="2" Cursor="Hand" MouseLeftButtonUp="MouseClicked"/>
<TextBlock FontSize="36" Canvas.Left="10" Canvas.Top="15" Foreground="Blue" Text="Hello Silverlight" Cursor="Hand" MouseLeftButtonUp="MouseClicked"/>


The TextBlock

The Canvas and schema lines are identical from the first tutorial, and the TextBlock is visually identical on the page, but I've made some changes to it:
To make this conform with most other objects, I chose to move away from the html-style syntax and use Text="Hello Silverlight" inside the TextBlock
This is one of the cursor choices available, and is the standard one letting the user know that something is 'clickable'
This is one of a handful of mouse messages (left-mouse only) that we have available. This one fires a Java Script function when the left mouse button is released on the object in which it is defined. In thie case, a function "MouseClicked" will be executed.
If you move the mouse over the text in the canvas above, you'll see the cursor change. We don't have to do anything to reset the cursor when we leave, the control takes care of that for us. I'll talk about the mouse handler a little lower in this tutorial.

The Rectangle

The Rectangle object can be used as an outline or as a full-color panel. In this case, I'm just using it as an outline around the TextBlock. I also have a cursor paramenter and MouseLeftButtonUp message on the Rectangle:
This denotes the width of the Rectangle object in pixels
This denotes the height of the Rectangle object in pixels
Borrowing syntax from the graphics world, stroke is the 'border' of the object, in this case I chose to make it be Black
The thickness of the stroke in pixels
Fill defines the color used to fill the center of the Rectangle. We're not using a fill value, but I will discuss it below.
A Double value representing the offset from the left-hand side of the container Canvas. The default is 0.0
A Double value representing the offset from the top of the container Canvas. The default is 0.0

Object Hierarchy

It's not obvious in this canvas, but will be in later ones that there is a hierarchy of objects on a canvas, and subcanvases. Unless otherwise noted, the herarchy is top-to-bottom in the xaml file.

The important thing to take away from this is that something lower in the xaml file will be displayed "on top of" objects above it in the same canvas.

In this simple example, if the rectangle did not extend beyond the text, the text would be written over the border because the TextBlock is below the Rectangle in the canvas. If this seems counter-intuitive, just think of the xaml as being populated top-down.

In another Tutorial we will discuss ZIndex, and that is the "otherwise noted" I mentioned above. For now we are not explicityly using ZIndex.

MouseClicked Java Script

Rather than try to do something with the click of the mouse, I thought it would be instructive to demonstrate a very small introduction to finding out information about the xaml objects based upon Java Script events.

Our MouseClicked function looks like this:

<script type="text/javascript">
function MouseClicked(sender, args){
alert("Sender: " + sender.toString());

All I'm doing with this is formatting a message to display to the user. The message consists of the name of the object type that was responsible for the mouse event. Since both the Rectangle and the TextBlock point to the same function, we need a way to tell them apart. Later we will 'name' our objects, for now I wanted to show the object type name being displayed.

If you click the TextBlock, you will see a message: "Sender: TextBlock".

And if you click the Rectangle, you will see a message: "Sender: Rectangle".

Rectangle-Click Problems?

Did you have trouble clicking the Rectangle? I did that on purpose to show that if the rectangle is not filled, the mouse messages will only be on the stroke. If you move the mouse carefully from the Rectangle border inward, you'll find a 'dead zone' where the cursor changes back to a pointer instead of a hand and no mouse messages are available.

This is one of the many interactions you need to be aware of if you're writing xaml by hand, or modifying pre-existing xaml. The obvious way around this would have been to fill the rectangle with white to match the background. But I wouldn't have been able to demonstrate this little nugget if I'd have done that :)

One more thing to note: Even if the Rectangle was filled, the mouse message when the TextBlock is clicked will say "Sender: TextBlock". This is because the TextBlock is on top of the Rectangle. This becomes important when you have many objects on the canvas and are trying to get a specific affect to work for you. Don't worry about this now, I'll discuss it at length later. For now, it's just something to keep in mind.


I'm stopping here. I hope I didn't run too long, but these few concepts took a bit of explanation. I'm trying to do these as short as possible and still transmit good information in each one.

I think next time I'll continue with the basic Rectangle and TextBlock concept, only make the Java Script have more functionality.

Thanks for the feedback I've received!

Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse