Thursday, September 18, 2008

Let's Not Stop Here

[ Updated for Silverlight 2 ]

Hi friends,

In my previous post I have listed 10 lesser known things in Silverlight. Here are some more.....

1. Scale Mode: See the following code.

<div style="height:5;width:500;border:solid 3px #00FF00;"">
<asp:Silverlight ScaleMode="None" Width="100%" Height="100%" ...... />
</div>

Now see the blue part. There are 3 values you can set in ScaleMode. None (that is default), Stretch and Zoom.

None: The Silverlight component retains its size specified inside. (in Page.xaml for example)
Stretch: The Silverlight component occupies the available space inside the div.
Zoom: Like Stretch but keeps the aspect ratio.

Now we have one Silverlight application. In the Page.xaml we have set the height and width of the user control to 100 and 400. We have one grid that occupies this usercontrol and has a red background.

Now in the html we have set silverlight contenainer div size to be 500 x 500. If we now set ScaleMode="None" That is default we will see our application rendered like the following.



The green border is the border of the silverlight container div. Red part is our original silverlight component.

Following is in Stretch mode



This is in Zoom mode



See how it preserves its aspect ratio in Zoom mode.


2. Check Silverlight Version: You can check what silverlight version is installed in your computer in this page.

3. Silverlight Event Bubbling: Silverlight has some events that are called routed events and they bubble from child to its parent element. Mainly mouse and keyboard events fall in this category.

This simple application will show how Silverlight event bubbling works and what you can do to allow or stop it.

Lets have 3 canvases and arranged them like the following

Blue Part is the root canvas, red one is a child inside blue one and green one is inside red canvas.

RootCanvas -> Blue one
Child1Canvas -> Red one
Child2Canvas -> Green one

Now we will write 3 MouseLeftButtonDown event handlers for 3 of them.

public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded);
}

void Page_Loaded(object sender, RoutedEventArgs e)
{
RootCanvas.MouseLeftButtonDown += new MouseButtonEventHandler(RootCanvas_MouseLeftButtonDown);

Child1Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child1Canvas_MouseLeftButtonDown);

Child2Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child2Canvas_MouseLeftButtonDown);
}

void Child2Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}

void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}

void RootCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}


Now set breakpoints on each of the event handlers to see what is going on. You can also put alert for it. Now run the application and click on the green canvas. You will see the break points are hit in the order green canvas (child 2) to its parent red canvas to its parent the blue canvas.
Now this is the default behavior. Now suppose we want to pass the event from green to its parent red but not to the blue one. Now as at the red canvas we want to stop the bubbling we have to write
e.Handled=true at its event handler. Now the event will not be passed to the blue one.

void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

Now Silverlight controls handles the mouse events internally and they don't let them bubble. So if you place a button or other Silverlight control inside the green canvas you will not be able to catch its mouse down event or pass it to the parent canvas.

See this great blog post and this documentation for details.


4. Enable help for Silverlight in Visual Studio 2008: You already installed Silverlight SDK and still can't see help on Silverlight from Visual Studio? Here is how to enable it.

1. Open Visual Studio (you might have to open VS as an administrator).
2. In the Help menu, choose Index. Microsoft Document Explorer displays.
3. In the Filtered by: drop-down, choose to (unfiltered).
4. In the Look for field, type Collection Manager.
5. Below the Collection Manager heading, double click Help.
6. Below the Collections available for inclusion in VSCC heading, check Microsoft Silverlight 2
SDK Documentation.
7. Click Update VSCC.

Now after restarting visual studio you can see it in help -> contents.

This steps you can find inside the readme file
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Documentation\VS-Help\en-us\readme.txt

5. Document outline: This is actually a feature in visual studio. If you layout is complex and you want to easily navigate to parent or child elements you can use this. View -> Other winndows -> Document outline.

6. Why my mouse events aint working? Have one simple Silverlight application with a green Grid with height and width 300 and 400. At the MouseLeftButtonDown event handler write one alert.

private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
HtmlPage.Window.Alert("Event is Fired and catched");

}

Now run the application and click the Grid. The alert will come. Now remove the background attribute from the grid and run the application. Click the grid. No alert will come. :). Though I don't know the reason for it but it might be intentional. Guess why? It might prevent bad guys to fool user think clicking an html element.

Thanks all for keep on visiting my blog. I am a bit busy with my work right now and I will post some material for the newbies in Silverlight in my future posts.

1 comment:

Kevin McFarlane said...

When I set ScaleMode="Stretch" or ScaleMode="Zoom" the control just disappears with no error messages. This happens in both IE and Firefox and in any application. Any ideas?