Friday, March 04, 2011

How to: Storyboard only start with the conspicuousness of the application in the browser window

In two previous articles, I have described techniques to only start a Storyboard when loading of the Silverlight based application is complete. These techniques help no longer at the latest when the Silverlight application has a small size, part of a larger html page is and is not initially visible, if the html page starts, for example because it is embedded at the bottom of the html page.

This article fills this gap.
At the bottom of this article, you will find a sample application that demonstrates the technique. The application takes place a Storyboard, as soon as the application in the browser window is visible. If you are curious, scroll this page simply down and as soon as the sample application is visible, the storyboard begins. (The Storyboard a bar from left to right is moving and changes the background color of dark grey to green.) (It runs only once.) Below you will find the source first.

Partial Public Class Main page
Inherits UserControl
Public Sub New()
InitializeComponent()
AddHandler CompositionTarget.Rendering, AddressOf DoSomething
End Sub
Private Sub DoSomething (ByVal sender as object, ByVal e as EventArgs)
sbTest.Begin()
RemoveHandler CompositionTarget.Rendering, AddressOf DoSomething
End Sub
End Class

And this is how it works. In the handlers of the constructor of the application, a delegate is added to the CompositionTarget.Rendering() event. This delegate points to the DoSomething() method. The DoSomething() method starts the storyboard, and then remove the delegate.
And why does the whole thing? It's simple: The event "Rendering()" of the class CompositionTarget fires only if the Silverliight PlugIn in the browser window is visible at least part of the way."

Read more: SilverLaw