Some More Tips

Here are some Tips.....

1. Reducing xap size

• Select Release in properties before moving the xap to the production and build.
• rename the .xap file to .zip. Extract the zip and then re-zip it. It generally decreases the size quite a bit.
• Use vector graphics instead of images.
• Load the assets on demand instead of packaging them in the xap.
  

2. How to set some value to Auto?

• You can set a value (Say Width of a canvas) to Auto in xaml. How can you do it from code? Set canvas width = double.NaN.
  

3. ObservableCollection

• You get a new type of collection with Silverlight, called ObservableCollection. You can use this type of collection wherever you normally use a list. Like setting the ItemsSource of a ListBox. The benefit of using this over List is that it automatically updates the Items whenever the collection changes. This is really helpful for data binding.
  

4. How to rotate something from its edge?

• Suppose you have a red rectangle. Now if you rotate it with a storyboard it will rotate like the below image. i.e from center of the rectangle.
  

Now you want to rotate it from its edge. You can see a small dot in the center of the rectangle like the following in blend design view when you select the rectangle.


That dot defines render transform origin or the origin of all the transformation that will be applied to the rectangle. Now you can drag the small dot to the edge of the stick and the stick (rectangle) will rotate from the edge like the below image.

5. How to set style from code?

• You can apply a style in xaml like the following. Style="{StaticResource ButtonStyleKeyName}". Now if you want to set it from code do like the following. MyButton.Style = (Style)Resources["ButtonStyleKeyName"];
  
• Remember you can set style only once. So if you are trying to do like MyButton.Style = (Style)Resources["ButtonStyleKeyName2"]; After setting the style for the first time you will get an exception.

6. Auto refresh page after silverlight installation.

• Suppose someone viewing your website and does not have silverlight installed. You prompt him to download and install it. Now after installing the silverlight the page should be auto refreshed so he can see your silverlight application. If you use object tag and include Silverlight.js file this behavior is default. This line in Silverlight.js determines that. Silverlight.onSilverlightInstalled = function () {window.location.reload(false);}; Set the parameter to true if you want to bypass the cache.
  
• Could not find a way of doing this with asp:Silverlight tag still. Please tell me if you know the way.
  

7. Double click support:

• Check it here.

8. Where are the dlls for Silverlight?

• The library dlls for Silverlight are in library folder inside Silverlight SDK. The default location for it is C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries. This is specially useful if you are adding any reference from Expression Blend.
  

9. How to make sure user does not get the old xap from the browser cache?

• There are many solution for this. One quick way is to Add a random number in the querystring of the xap source. for ie Source="~/ClientBin/RotateExp.xap?rnd=029db68e-02c0-4dc8-a4f9-81b09f8000da"
  

That's it for now. Happy New year. :)

Silverlight Bookmark

Hi all,
For the last month I was a bit busy so couldn't post much in the blog. However I think its time to share some links. I am trying to group them so that they can be easy to maintain.

Documentation and Reference
1. MSDN Documentation
2. Silverligh Controls
3. Pattern and Practices
4. Silverlight 2 developer poster
5. Silverlight Deployment Guide.

Tips
1. Silverlight Tips

Extra Controls
1. http://www.codeplex.com/silverlightcontrib
2. http://www.codeplex.com/Silverlight
4. http://www.telerik.com/products/silverlight.aspx
5. http://www.componentone.com/SuperProducts/StudioSilverlight/

Some good sites and applications build in Silverlight
1. Hard rock memorabilia
2. A huge collection of Silverlight applications

Some good blogs
1. Tim Heuer's blog
2. Jesse Liberty's blog
3. Michael Sync's blog
4. Pete Brown's blog
5. Avi Pilosof's blog
6. Wilfred Pinto's blog
7. Shine draw
8. Scottgu's blog
9. Makram's Silverlight blog
10. MossyBlog
11. Shawn Wildermuth's blog

3D with Silverlight
1. http://www.codeplex.com/kit3d

Community Sites
1. Official Silverlight Community Site
2. Silverlight Show

I will try keep this updated. Also please add comments if you have some other good links and I will add them.

Silverlight Flexible Layout

Hi friends,
I have seen in Silverlight forums and other places that there are some confusions about Layouts. Specially how to give your Silverlight application a flexible layout that will be adjusted automatically as browser resize. Hope this post helps.

Basically there are two ways of doing it. One is from code where you will change the height,widths of controls as browser resizes. Another is creating layout as it automatically changes with browser resize. I will explain the later here.

Silverlight has 3 layout controls. Grid, StackPanel and Canvas. Canvas is NOT A FLEXIBLE ONE. Other two are. That does not mean you will not use Canvas but you will use it where you know the canvas does not have to be adjusted with browser resize.

So basically we will try building the following layout.



Now the top part is flexible provided that the text will come in middle. Middle green part is flexible but has a orange box in it that is fixed size. Bottom left red part is fixed but right skyblue part is flexible with text aligned to right.

Now come to the Page.xaml. There will be one LayoutRoot Grid is already defined. Now as you can see we will have 3 rows in the LayoutRoot Grid. Top white one middle one and bottom one.
We will set fixed height for top and bottom rows and let the middle row occupy the remaining height. I have given 100px for Top one and 100px for bottom one.

We will put one Grid for each row namely TopGrid, MiddleGrid and BottomGrid and set their Grid.Row property to 0,1 and 2 respectively.

Now we will define two columns for the BottomGrid. First one with fixed width ( 70 here) and the second one with remaining size. We will also add two Grids inside bottom grid and set Grid.Column to 0 and 1 respectively. We will name them as LeftBottomGrid and RightBottomGrid.

Now if you set the Grid backgrounds as the above image your application will look something like the following in the design view.



My Usercontrol width and height are 40o and 500 respectively.

Now we will add one textblock in the TopGrid and with text "WELCOME TO SILVERLIGHT" and set text align to center. Also set its vertical align ment to center.

We will add one canvas with orange background inside MiddleGrid and set its height and width to 100.

We will finally add another textblock in the RightBottomGrid with text "Code name Mrgni" and have its text alignment right. Also set its vertical alignment to center.

Now remove the height and width from the UserControl tag. It is required as we want our Silverlight application to Streach the entire div it has been assign to. Now run the application and here it goes....

Now here we have not used any relative positioning. But that can be done easily. Suppose you want the TopGrid to always have the height 100 but want the BottomGrid to have 1/5 th of remaining height and rest part to be occupied to MiddleGrid. Just change LayoutGrid's rowdefinitions as 100, 4*, 1* and you are done.

Here is the complete source for it. Please leave a comment if you have any doubt or any correction. I have done this application totally from Visual Studio but you can do it from blend as well.

Too Early For Silverlight 3?

Hi friends,
I am excited about what Silverlight 2 brings us. Still there are some features that we miss and might come in the next release. I have created a thread for Silverlight 3 Wish List in the Silverlight forums. Please add whatever you think might come in handy in next release. And yes Silverlight Team do care about the community.

A Simple Clock In Silverlight

Hi friends,
Friday one of my friends (Manasa) send me some unusual clocks developed in flash. That gave me the idea of making one of them (the easiest one) in Silverlight.
I made it like the following

Brief Explanation

The root canvas contains 7 canvases. Each of them holds seconds, minutes, hours and other texts and digits. Each of the canvas is wide enough to hold all the digits or text. The root canvas clips it to show only 450 pixel. The child canvases move right to left so it appears moving to the user.

Now lets see seconds panel. Others will be similar.

Seconds panel has 9 digits visible at any time. Total seconds panel contains all the digits and clipped by the root to show only 9 digits.
Seconds panel has got 69 digits 0 1 2 3.......58 59 0 1 2 3 4 5 6 7 8. Last 9 digits are added because when we shift the panel from right to left at time the viewable part will be 59 0 1 2 3 4 5 6 7 8.(half of 59 and half of 8) Then it will be again 0 1 2 3 4 5 6 7 8 and this time we can repeat the animation without letting user see any discontinuity.

Seconds, minutes and hours panels are been shifted through animations. Days, dates are updated once in an hour. Months are updated once in a day and years are once in a month. (Seeing it update will keep you open your browser at least a month though !!!)

When the application starts it updates so the red line shows current values.

You can find the complete code here.

Fractal Images -- Mathematics With Silverlight Again

Hi all,
When I first seen fractal images I was really impressed and wanted a bit try for making one myself. I have made a simple application that will generate some kool images based on fractal algorithms. This program is not for describing fractals, this is just to make some pretty images totally by complex mathematics.

here is one image that uses (Z * Z * Z + C) / (Z * Z * Z - C) formula and C=0.45 here. (C and Z are complex numbers)



You can make lots of images using different equation and different values of C.


How the Images are created.....

The image is actually a collection of 1 x 1 pixel ellipse different color. These ellipses are placed in a 500 x 600 Canvas. fractal algorithm determines how to color the ellipses and that is the only magic.

Algorithm.....

int iteration = 0;
do
{
R = (Z * Z * Z + C) / (Z * Z * Z - C);
Z = R;
iteration++;
} while (iteration < 100 && (R.Real * R.Real + R.Imaginary * R.Imaginary) < 4);

For coloring the ellipse

Random r = new Random(iteration);
byte red = (byte)r.Next(255);
byte green = (byte)r.Next(255);
byte blue = (byte)r.Next(255);
Plot(x, y, Color.FromArgb(255, red, green, blue));

Though it is using random number for same iteration value the color will be same as iteration is been used as seed for the random number. This is the beauty of pseudo numbers.

Here you can download the complete source code.

You can see the application running here.

One caution:- The code involve too many computation and placing 300000 ellipses. So it takes about 20 seconds to complete and might hang your browser during this time.

Here and here you can see details about fractals and algorithms.

I have updated some of my applications and posts in last few days. I will complete it as soon as I can.

SL 2 And All My Broken Applications

Silverlight 2 is released. Now it has some breaking changes that breaks all of beta 2 applications. Though Microsoft has given some time to update beta 2 application to RC0 so they will be compatible to final release I did not get time to update my applications that I will be doing when I get time. I will be making some other applications as well. I will have to update my posts so they are still relevant. Lots of changes....