WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:







Lifetime Member:

Silverlight With Java Script Tutorial 05 - Opacity and Visibility, Ellipse, MouseEnter/MouseLeave



Overview

In this fifth Tutorial, I'm going to show a couple more of the mouse events we have available and how to use them. I'm also going to demonstrate the Ellipse object and talk a bit about Canvases and Opacity.


Our XAML

Here is the XAML for the canvas above:

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Ellipse x:Name="ellipse" Canvas.Left="10" Canvas.Top="10" Height="60" Width="200" Fill="LightBlue" Stroke="Black" StrokeThickness="2"/>

<Canvas x:Name="RectangleCanvas" Canvas.Left="57" Canvas.Top="27" Cursor="Hand" MouseLeftButtonUp="MouseClicked" MouseEnter="RollIntoButton" MouseLeave="RollOutofButton">
<Rectangle x:Name="EnclosingRectangle" Width="103" Height="25" Stroke="Black" StrokeThickness="2" Fill="White" />
<TextBlock x:Name="Hello" FontSize="12" Canvas.Left="5" Canvas.Top="5" Foreground="Blue" Text="Hello Silverlight" />
</Canvas>

<Ellipse x:Name="ellipse2" Canvas.Left="10" Canvas.Top="10" Height="60" Width="200" Fill="Blue" Opacity="0" Visibility="Collapsed"/>

</Canvas>



Our HTML

Here is the HTML and Java Script to run this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Silverlight With Java Script Tutorial 5</title>
<script src="js/Silverlight.js" type="text/javascript"></script>
</head>

<script type="text/javascript">
function MouseClicked(sender, args){
sender.findName("ellipse2").Visibility="Visible";
}

function RollIntoButton(sender, args){
sender.findName("Hello").Foreground="Red";
}

function RollOutofButton(sender, args){
sender.findName("Hello").Foreground="Blue";
}
</script>

<body bgcolor="white">

<br />
<center>
<div id="Ag1Host" style="background:#FFFFFF">
<script type="text/javascript">
var pe1 = document.getElementById("Ag1Host");
</script>
</div>
</center>

<script type="text/javascript">
Silverlight.createObjectEx({source: 'xaml/SilverlightWithJSTutorial05.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});
</script>

</body>
</html>



The Rectangle and TextBlock

Our Rectangle and TextBlock objects are pretty much the same as they were in Tutorial 2 and 3. I've made the combination much smaller, and I filled the rectangle with White as in Tutorial 4. One difference from the last couple that you'll notice is that there are no mouse messages and no cursor assignment in either of these objects.


The "Container" Canvas

You can think of the Canvas as a placeholder, or a container if you wish. I wanted to make an object that looked somewhat like a button. I wanted a rectangular area with text inside. I wanted one set of mouse messages for the whole 'button'. A way to achieve that is by having a Canvas contain our two objects that we're now familiar with: our Rectangle and TextBlock.

The Canvas object has many of the same parameters as the other objects. The ones used here that you should now have experience with are:
  • x:Name
  • Canvas.Left
  • Canvas.Top
  • Cursor
  • MouseLeftButtonUp
Parameters I'm introducing in this tutorial are:
MouseEnter
This defines a Java Script function to be executed when the mouse enters the object containing this value.
MouseLeave
This is the reverse of the MouseEnter in that it executes when the mouse leaves the object.
Note that the Canvas contains the Cursor and MouseLeftButtonUp parameters that we've previously placed in the Rectangle and in the TextBlock. By enclosing the two inside a Canvas, we can now have only one set of parameters deal with this for us for the object we've created out of the two.

I'm sure you have already, but if you move the mouse over the canvas, you'll see that the entire rectangle object has the "Hand" cursor because that's the area enclosed by the Canvas.

If you've already clicked on the 'button', you'll have to refresh the page to get the mouse cursor again, and I'll discuss that below :)

One more note: Our 'container' canvas has Canvas.Left and Canvas.Top settings from it's parent object. Likewise, our Rectangle and TextBlock objects have Canvas.Left and Canvas.Top relative to their parent, the container. This works very nicely if we decide to move the group somewhere else on the main canvas... we only have to reset the container settings!


The Java Script

The Java Script handlers for the MouseEnter and MouseLeave are here:


function RollIntoButton(sender, args){
sender.findName("Hello").Foreground="Red";
}

function RollOutofButton(sender, args){
sender.findName("Hello").Foreground="Blue";
}


This should be familiar from Tutorial 4. All that is happening is that the sender is used to find the object named "Hello" (the TextBlock), and the Foreground parameter is changed to Red for mouse enter and back to Blue for mouse leave. This gives us a very nice rollover indication, following the idea of a button.


The Ellipses

Switching directions just slightly, let's talk about the Ellipse in the background. The Ellipse is another Silverlight Object that has many of the same parameters as the Rectangle. As a matter of fact, there's not one parameter used in the background Ellipse that shouldn't already be familiar to you:
  • x:Name
  • Canvas.Left
  • Canvas.Top
  • Height
  • Width
  • Fill
  • Stroke
  • StrokeThickness
It may be obvious, but to draw a circle, simply have width=height, and as with the Rectangle, Stroke is Border, Fill is inside :)

The background Ellipse was placed on the canvas just as a background to show the 'button' against. Note it should start to become familiar now that since the Ellipse is above the 'button' canvas, that the button will be shown on top of the Ellipse.

You'll notice there is a second ellipse, and it is below the button canvas. It contains the Visible parameter which we've discussed previously, but also contains a new one:
Opacity=
This Double defines the 'opaqueness' of an object. "0.0" is see-through, "1.0" is 'solid', with any value in between.
In our xaml, I have the Opacity of the second ellipse set to "0" so that we don't even know it is there. It is also set to Visibility="Collapse", which would also make it be not visible to us. The combination of these two parameters will come into play shortly.

Note that in all other respects, other than name, the two Ellipses are identical.


Canvas MouseLeftButtonUp

I'm sure you've tried it already, but in case you haven't, click the left mouse on our button. Now move the mouse around on the canvas. What happened to our cursor? Everything appears as before, yet our Cursor="Hand" is gone... or is it?

The answer is in the MouseLeftButtonUp handler:

function MouseClicked(sender, args){
sender.findName("ellipse2").Visibility="Visible";
}


This code should also be very familiar from Tutorial 4 where we enabled a TextBlock by setting it Visible on a mouse click. In this case, we're setting the outer Ellipse "Visible". The 'outer' ellipse is lowest in the xaml, so above everything on the canvas. Setting it "Visible" yet Opacity "0" means we see right through it as if it were not there, but it is now blocking all mouse messages to our button because it completely covers the button. Interesting?


Summary

New parameters or topics covered in this Tutorial:
  • Container Canvases
  • MouseEnter and MouseLeave handlers
  • The Ellipse Object
  • Object Opacity
  • Interplay between Opacity and Visibility


Next

There are still some Objects we've not discussed, but you can do a lot with these simple few. I think I'm going to discuss some basic animation next to get us all thinking of those possibilities and discuss the remaining basic objects as the need arises.

Keep having fun!


Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse