Some Guidelines For Developing Silverlight Applications

Hi,
Here are some basic guidelines for building Silverlight applications. They are based on the problems I have faced and seen. Keep in mind none of them are rules, and you can (you should actually) follow only some of them as it suits.

1. Use source control :

---

Use source control even if you are solo developer.

2. Plan all user controls as early as possible:

---

Plan your modules early. This will help you plan how to do interaction between them early and you don't have to do some ad-hock fix later. Create them and have some basic methods like Initialize and Deinitialize inside them.(see point 5)

3. Separate each part into a user control:

---

a. It will help many people working in the same application without much side effect on another control.
b. It helps isolate any problem to a small region so that it would become easy to rectify it.
c. It helps reuse the same control in different places.

Add some classes for basic functionality like checking for URL format or parsing an xml. You can make separate library if they are big enough.

4. Loaded event is harmful:

---

Do not rely on the loaded events. Why? In one application I was adding and removing an user control when needed, dynamically from code. Each time I was not creating a new object. Instead I was reusing the same one. Now I have attached the MouseLeftButtonDown event inside the loaded event of that user control. What was happening is this. Each time I was adding the user control the loaded event was getting fired and the event was been attached again. So the event handlers are fired multiple times. So adding and removing the user control a few times was making the application run very slow. It took me a hell lot of time to find out why.

So where to put the event handlers? See below.

5. Initialize and Deinitialize :

---

Put one Initialize and one Deinitialize public method in every user control you make. It is useful in many ways.

a. You can add the event handlers and other code that must run only once inside Initialize
method.

b. You can pass parameters to Initialize method without disturbing the constructor signature
or adding a new constructor. So new YourUserControl ( ) will always work.

c. You can use Deinitialize method to clean up the control. This is specifically required when
you are showing some customized content to the user and need to change it when user
signs out or another user signs in.

Now while creating the user control for the first time you should call the Initialize method with proper parameters.

One disadvantage of this approach is it has the feeling of evil destructors in c++. You need to be careful while calling these two methods.

6. Don't put your event handlers from xaml:

---

While is perfectly legal to add event handlers from xaml it is better to do it from code. Reason is...

a. Xaml belongs to designers. Event handling belongs to programmers. So its easy to attach
or detach event handlers from code without disturbing the xaml.

b. Suppose you have attached event handler to a control from code. Now if the name of the
control is changed or the control is been removed from xaml you will get an compilation
error with clear meaning. Now if you have written the event handler from xaml and
removed the appropriate method from code you will get an exception with less clear
message.

7. Select your layout carefully:

---

Take time to select proper layout. I can assure you it will save a lot of your time debugging later. Take your design mock up and think about how you can make the layout. Understand advantages and limitations of Grid, StackPanel, Canvas, Border, Popup, ScrollViewer etc. Some tips for choosing layout.

a. Most of the time you will find Grid is suitable for the top level container (root). This is specially true if your Silverlight application is occupied total page. You will find it containing header, footer and sometimes left and right module. These can be easily done with dividing main root grid with columns and rows.

b. For very complex structures inside the application you will find Canvas is best fitted. Specially if its height width is specified and has overlapped controls inside it.

c. While you are dividing your grid with rows and columns sometimes you will find you need only columns or only rows. Its time for choosing a StackPanel with proper orientation specified. StackPanel also adjust its children while new child is added or removed.

Though its personal preference I prefer to do the top level layout from Visual Studio or at least check the xaml structure in visual studio after making it in blend. It helps prevent some properties getting set automatically without your knowledge and to remove redundant code.

8. Avoid specifying height and width explicitly:

---

Make your application layout such a way you don't have to specify height and width for each control. Grid has many flexible features like Horizontal and Vertical Alignments, Row and Column properties. Use them wisely. If you make your layout structure carefully you will find most of the time you can avoid using height, width and margin. Also try to avoid negative values in margin. Most of the time it means you have chosen wrong horizontal alignment or vertical alignment property.

9. Don't put any secret inside your code:

---

Silverlight is a client side technology. Keep in mind all your code goes into users machine and can be easily decompiled to view the code. So never put any sensitive data inside code. Security is the most critical part in today's internet. Security is invisible as long it protects you but it is needed most. Think carefully and from the design phase of your application about security. Don't rely on security through obscurity.

10. Test individual user control:

---

After creating a user control run it directly from app.xaml.cs by setting the root visual to the control. Call initialize method with proper arguments and check if it works as expected. Test the application thoroughly and fix the slightest defect you found.

11. Don't use image as a button:

---

In Silverlight 1.0 we did not have any button control so we used some xaml or image for button.
In Silverlight 2 use a button and style it appropriately. It helps in the following way...

a. Maintaining states like mouse over or pressed.
b. Basic functionality like click. (No, click is not same as MouseLeftButtonDown event)
c. Use the same style without copying whole xaml.

This is also valid for all other controls.


12. Don't put redundant code:

---

Your code should look beautiful. Remove redundant code and simplify the logic as fer as possible. Auto generated codes sometimes generates lot of extra code if you use them in a wrong way. Clean them up.

13. Performance:

---

a. Reduce your xap size.
b. Reduce the loading time for total or different parts of your application.
c. Avoid windowless=true.
d. Crate vector graphics for simple images.

14. Use web services for server communication:

---

Silverlight runs on users machine so can not interect with server or database directly. There are many ways of doing it but the best and easiest way is using web services.
Use WCF services if possible.

15. Use Isolated Storage, but carefully:

---

Use Isolated storage. But DO NOT put any sensitive data there.

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.