Tuesday, July 29, 2008

Some Lesser known things in Silverlight

[ Updated for Silverlight 2]

Here are some of them.......


1. EnableFrameRateCounter :
Wander what fps (Frames per Second) is you silverlight application running? Set EnableFrameRateCounter="true" in your aspx page.
The default maximum value is 60

this is what is shows in my browser. 19.74 is actual and 60 is max set value.




You can set MaxFrameRate there in that tag too. The Actual fps will depend with processor speed and how busy it is.


2. EnableRedrawRegions:
This is sometimes helpful when debugging. Setting it true will show when Silverlight redraws any region. Here I what I got when animating a circle.




3. PluginNotInstalledTemplate: This is useful when you want to do something when Silverlight plugin is not installed in users browser. This is how to do it

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/TicTacToe.xap" MinimumVersion="2.0.30523"
Width="100%" Height="100%">
<PluginNotInstalledTemplate>
Write something to show if plugin not installed
</PluginNotInstalledTemplate>
</asp:Silverlight>

4. SplashScreen: Whenever we start a silverlight application the silverlight control provides a default splash screen while the xap file is loading. It is pretty good but still sometimes we need to add our own splash screen. Here is the Silverlight tutorial that shows it step by step.

Here is a blog post that will help providing splash screen with asp:Silverlight tag.


5. InitParameters: You can pass initialization variables with InitParameters. here is a sample

InitParameters="BaseUrl=http://live.com,ResourceUrl=http://www.microsoft.com">

and now from App.Xaml.cs file

private void Application_Startup(object sender, StartupEventArgs e)
{
string baseUrl = e.InitParams["BaseUrl"];
string reasourceUrl = e.InitParams["ResourceUrl"];
this.RootVisual = new Page();

}
You can pass the parameters in the constructor of Page class.

6. Read Query Strings: Add System.Windows.Browser namespace where you want to access query string.

if(HtmlPage.Document.QueryString.Keys.Contains("Name"))
{
string name = HtmlPage.Document.QueryString["Name"];
}

Url- http://SampleDomain/SamplePage.aspx?Name=Tanmoy

7. Famous Firefox nested DIV problem: Strictly speaking this is not related to silverlight. Still you might have faced this problem with firefox. Try to run the following in FF.

<div>
<div style="height: 100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/TicTacToe.xap" MinimumVersion="2.0.30523"
Width="100%" Height="100%">
<PluginNotInstalledTemplate>
Write something to show if plugin not installed
</PluginNotInstalledTemplate>
</asp:Silverlight>
</div>
</div>


It will run in IE but not in FF. Remove the upper DIV and it will run properly. One work around is to set height=100% to the upper DIV. This problem is because FF deals DIV differently.

8. What the ifame is doing here?: If you see the html object code for silverlight page you will see one iframe after the object tag.
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

The reason behind this iframe is stated in the documentation like the following

The presence of an IFrame prevents the Safari browser from caching the page. Safari caching prevents the Silverlight plug-in from reloading when the user navigates back to a previously-visited Silverlight page.

9. How to open .xap file: I guess you already know it but if you don't it is one coolest thing. XAP is a binary format but it is actually a .zip file renamed to .xap. So you can open it with WinZip or any other .zip file opener. It has one AppManifest.xaml file inside that defines the entry points and other assembly you are using. It also will have DLLs and optionally any resources you need to be loaded with the xap.

10. Relative positioning: It is possible to position the elements inside the Silverlight component relatively. For this you have to use Grid or StackPanel. I am showing it with a code.

<Grid x:Name="LayoutRoot" Background="Gray" ShowGridLines="True" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="50" />
<RowDefinition Height="2*"/>
<RowDefinition Height="auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.Column="2" Grid.Row="2" Height="40" Width="30" Fill="Blue" />
</Grid>

First the ShowGridLines="True". It is very useful when you are experimenting with Grids. It shows the outlines of your Grid with dotted lines.

Now here is the output I got


Now here is explanation.

Total width is 300 px and it is distributed with 4 columns in 1:2:3:1 ratio.

Now coming back to rows. There are 4 rows sharing 300px height. But one of them is occupying 50px. Now the height of the 3rd row is set to auto. That means it will take the height of its child element. That is the blue rectangle. Rest of the height available will be distributed with other two rows with 2:1 ratio.

I have been writing this post for quite a long time. Been busy with other tasks too. In anything you want to ask please leave a comment.

2 comments:

Ritesh said...

Really nice information Tanmoy. I am sure you gonna be a silverlight GURU one day :)

Tanmoy Rajguru said...

Thanks Ritesh. I learnt lots and gonna learn more from you. Though I want Flash to face a real competition :) and want your skills to be used in favor of Silverlight :)