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....

Silverlight RC0...After A Long Wait

[ Silverlight 2 is now released so this post is no longer valid. ]

Silverlight RC0 has been shipped. It is only developers release but will be feature complete. I did not get much time to see if it breaks some of my applications. It does have some features we were waiting for but we expected some more. Anyway lets see how it works with the new expression blend service pack and VS tools.

Installing RC0 might be a bit painful as it needs uninstalling all previous SL things and needs some tools. Here is the steps I did to get it work.

1. Uninstalled everything related to beta 2. (Silverlight tools for VS, Expression Blend, Plugin -- Everything)
2. Installed Silverlight 2 RC0 developer runtime.
2. Installed Microsoft Visual Studio 2008 Service Pack 1.
3. Installed new Silverlight tools for VS 2008.
4. Expression Blend 2 trial version.
5. Blend 2 SP1.

Oops. Finally. :)

Steps might be different but I got it working this way.

One important thing is this is only developers release so publicly only beta 2 is available now. So we can't yet release the application in RC0 but lets prepare for the day. :)