A Beautiful Day

Bet You Didn't Know

2010-09-09T09:34:00.019+05:30

Well ... Of course you know some of them ... Here are they ...

1. When you install Silverlight toolkit, a sample page gets into your machine: You can open the page and have a quick look at the controls. Default location is ...
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Samples\default.htm
You also get the toolkit document in
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10

2. My domain hosting company doesn't support .xap MIME type: The solution is to change your .xap extension to .zip and it will work. Don't forget to change this in the Object tag source param also. One tiny problem with this approach is that your Splash screen (That you built using plain old XAML and JavaScript) won't work.

3. MouseLeftButtonDown event is not fired when there is no background specified: When you write an mouse event in a Panel you need to specify some background. So if you want to make the background transparent add Background="Transparent" instead of leaving it blank. This is true for other FrameworkElements too (Like Fill in Rectangle)

4. You can specify your custom xml namespaces with default url: You need to add XmlnsDefinitionAttribute in AssemblyInfo.cs file and give an unique url as xml namespace. For example [assembly:XmlnsDefinition("http://mrgni.com","TestLibrary")]

5. You can go full-screen automatically: Well only for Out of Browser applications with elevated trusts. And guess what? All keyboard controls work there.

6. There is no cross domain restriction when your application runs in elevated trust: Well isn't it nice? For elevated trust you can work with COM components. Specially helpful for working with Microsoft Office documents. But whatever you do You can not go Administrator mode in elevated trust mode.

Zakumi Fan Club Is Live

2010-06-28T10:40:00.011+05:30

My first hobby website goes online. You can see it live in http://mrgni.com

[ UPDATE: ZFC is selected in Silverlight showcase. ]

It is made with Silverlight 4.

You can get the full source code [ Except the database connection string. ] in codeplex.

Features...

1. There are 4 main tabs in the site. Teams N Results, About ZFC, Gallery and News.
2. Teams N Results shows the information/standing of teams, groups, schedule and next match in local time.
3. About ZFC is stuffed with FAQ and information about the site and Zakumi.
4. Gallery shows photos related to current world cup. It also has an option to like this application and share this in Facebook if you connect with Facebook.
5. News tab displays what people are saying related to FIFA in Facebook and twitter. It also gives you the facility to search in those sites. If you login with Facebook you get an option to see what your friends are saying about the current World cup. It also shows news from FIFA website feed.

Development story ...

Design ...
I have started this project long time back. The initial problem I faced is to finalize the design ... It was like ...
1. You create a new design
2. Make it live [ Make the user interface in xaml ]
3. Show it to your friends.
4. Scrap it.
5. Go to step 1.

Here are the things I listed down before starting the project
[ And here is what it has become when I finalized the design ]

1. The background will be light and text dark.
[Opposite. Though I tried to maintain the contrast. ]

2. It should fit in any browser resolution. [ Lower limit 1024 x 768 ]
[It was so difficult that finally I made it 998px wide. Though it should not look bad at higher resolutions ]

3. All texts and fonts should be highly readable.
[ Most of the time yes. In a few cases no. ]

4. There must be a logo.
[There is. This is what you can create within an hour or so. It looks pretty horrible. ]

Here was the design I came up with, at my second try ...

And here how it looks after its finished ...

Both of them are direct screen shots of live site ... not the photoshop mock design.

Development ...
Source control: Used TFS 2010 with codeplex as source control. And believe me it helped me a lot more than what I initially expected.

Connect with Facebook: I am using Facebook Developer Toolkit for it. The problem is it uses the old Graph API and has some small bugs in it. Also it is a heavy weight library that is not required for my website.

Animations: The site is pretty dull. There are only a few very simple animations. It is mainly because of lack of planning and time.

Web services and Database: I am using WCF services and MS-SQL server for DB. ADO.NET entity models as ORM. It went smoothly but there are some improvements can be done.

[ The website is not updated with the latest results and 2nd round matches yet ]

Thanks,
Tanmoy

Zakumi in XAML

2010-02-08T11:41:00.006+05:30

I have made a vector (Xaml) image of the world cup 2010 Mascot Zakumi. Feel free to use/modify it if you want.

You can download it from here.

Shifting To Opera Again

2009-11-03T23:17:00.012+05:30

I was an "Opera Fan" on my last college years but submitted to Firefox since then. In last couple of days I downloaded latest version of Opera (10.1) and started using it again. And guess what. I simply amazed. I will be using it as default on my laptop. There are some features that really makes it useful. Yes besides "Kool".

1. Fastest back button: [ Back button works immediately. Probably it caches the pages in memory but who cares...] This specially helps me playing browser based massive multilayer games ( You know one second delay might means a lot in your bad times )

2. Speed Dial: Ok ok. Other browsers do support it. Still there are some features like making it highly customizable keeps Opera apart.

3. Notes: You can keep notes in your browser. and you don't need an extra plug-in for it.

4. Opera turbo: Admit - We all have slow Internet connections here in India. Don't we? Turbo makes highly compressed page and a little bit reduced image quality to fight that to 80%.

5. Opera links: Keeps your bookmark with you... wherever you are. [Except inside mariana trench probably ]

6. Ctrl + Z works: It reincarnate the closed tab. It is there with other browsers but not with fav ctrl + z.

7. Go to web address: Have a link in a page but not hyper-linked? Just right click ( or double click ) and select "Go to web address".

8. opera:config: Present in Firefox [about:config] but not in so organized and friendly manner.

9. Most perfect in following web standards: Only living browser with score 100/100 in ACID 3 test.

1o. Easter eggs n more: Till now I found .

a. Type /. in the address bar. It will take you to slashdot.org.

b. opera:drives will show the drives with directory ad all.

One Year of "A Beautiful Day"

2009-07-18T20:32:00.000+05:30

My journey with Silverlight started about 1 year before I started this blog. My first "Professional Program" was in Silverlight and after that I went deep into other parts of web development forgetting Silverlight for a while. With Silverlight 2 beta, I again started looking at Silverlight and I started "Loving it".

In the Journey I have meet many people smarter than I and tried to learn from them. I meet many people who has become my good friends.

What I always lacking was "Design mind set". When I meet Ramya I found she got the exact part that I am missing to make a good application. You already have seen her making a simple but elegant animation example.

Here are some statistics of the blog through one year... (I use Google analytics for this blog)

Thanks all for encouraging to continue this blog and I hope we will enjoy the future journey with Silerlight even more...

How Hard Is It To Get Somebody Install Silverlight

2009-07-14T09:08:00.007+05:30

Let me share a small conversation to my friend Melissa that just Happened. She is 100% non technical (Never heard of Silverlight) and just bought a new PC. Here is how I convince her to install Silverlight to her PC......

tanmoy says: hey
tanmoy says: did u install silverlight in ur computer
melissa says: ?
melissa says: no
tanmoy says: then do it.
tanmoy says: i m giving u the link
tanmoy says: http://www.microsoft.com/silverlight/
tanmoy says: it will ask u to install it
melissa says: I'm not downloading it
tanmoy says: y not. its from Microsoft so u can be sure its safe
melissa says: I don't need it
tanmoy says: u need it
melissa says: Why do I need it
tanmoy says: there are lots of site using silverlight
melissa says: So
tanmoy says: so if u install it u can see those sites, play games
tanmoy says: listen to music ,watch videos and all
melissa says: I can do all of that without it
tanmoy says: but its something I am working on
melissa says: Yeah
melissa says: Then its not that good to have lol
tanmoy says: yes it is
melissa says: No it's not lol
tanmoy says: why dont u do it....
melissa says: Why should I do it
tanmoy says: cause it only take 1 min to be done
melissa says: I just don't want ten million of things downloaded on this computer
tanmoy says: and it doesnt slow down ur comp
tanmoy says: its not that
tanmoy says: its very small thing. around 4 MB only
melissa says: k
melissa says: lol
melissa says: Fine ill do it

Finally.....
So now I do understand why people says might be as much as 40% of uses go away from a site that needs Silverlight without installing it.

BTW according to RIA Statistics Silverlight has gained around 30% of user base already. Impressive ha !

Understanding Animation

2009-07-13T10:15:00.002+05:30

From childhood we all are fascinated by one thing- movement of static objects or Animation. I feel the best part in Silverlight is its ability to animate things and fascinate its users. Animation always doesn't mean make a man run or breaking a table. Simple page transitions in a site or changes in the button when you hover over it , also comes under animation. So lets see how beautiful this animation can be. First we will animate a simple ball (an ellipse in technical terms!) using blend and then in the next part we will do the same animation from the code behind. So lets begin with it.

First rule in animation which I follow is to picturize it in your mind. So here is the picturization:
Lets think of a ball moving and falling in to a basket.

Here is the application in action

For the representation of the ball we would need something that looks like a ball. The closest would be an ellipse.

Now, think of the movement of the ball. The ball should bounce and roll over.So we would have to create a ground for it and keep this in mind. for the ground we can think of rectangle with a skew.

Next, we would have to think about the basket where we would be putting the ball. That can be again 2 ellipses with a skew(i mean a twisted ellipse). To give it an actual basket's feel we will take three such ellipses.

We would add few paths to make it look like a net.We have completed our picturization and now that it really looks like a basket ball court, let's begin with the animation!

We can create storyboard and give timelines to it, so as to achive the movement of the ball.Here I have given the ball only two types of transformation i.e rotate transform and translate transform.

Rotate transfrom would give the ball its rolling over kind of effect, whereas, translate transform(TranslateTransform.Y, TranslateTransform.X) would give it the up and down motion or translation in x and y directions.To adjust the timeline, you just have the drag the white point! It is so easy!! Let us see the final animation!

Here is the complete source code for it.

In the next post you will see this animation done entirely in code.So keep watching this space!

Some of the books in my collection

2009-07-01T09:20:00.002+05:30

Most of the things I know are from internet blogs and community and from practical experience of me or other people.

Still I like reading books and for in depth knowledge it is something you can not skip. Here I am sharing some of the books I have (I am reading them too) and some of the books I wants to buy soon.

I have already

1. Code Complete 2nd Edition.
2. Joel on Software.
3. More Joel on Software.
4. LINQ in action
5. Silverlight 2 in action.
6. C# 3.0 in a Nutshell.
7. C# in depth.
8. CLR via C#
9. JavaScript the good parts.

I want to buy

1. Mastering Regular Expression.
2. The Pragmatic Programmer.
3. JQuery in Action.
4. Data Driven Services with Silverlight 2.
5. Dont make me think.

I have already read some parts of Code Complete, Mastering Regular Expression from library and I can tell you these two books are great.

As you might seen I only have one book on Silverlight. I could not start this book yet. I will let you know more about the books when I finish them.

Please share your favorite books too.

Silverlight and LINQ

2009-06-24T20:28:00.007+05:30

I got a thread in Silverlight forum that asks how to select a row in a DataGrid?

Now here is the ans using a simple LINQ query.

MyClass item = MyDataGrid.ItemsSource.Cast().Where((_, pos) => pos == row_number).SingleOrDefault();

Now we have the data grid named MyDataGrid and we have already populated it with a collection of MyClass. We are using extension methods of C# 3.0 to help us select a row where row number is known.

In the lambda expression

(_, pos) => pos == row_number

we do not care about the first parameter so I have replaced it with '_'. (Remember '_' is a valid C# identifier).

LINQ has a great power to make your code compact and less error prone. Still I see many people using lengthy (Wrong?) way of doing simple things like selecting from a list where the list value satisfy a certain condition. Many people still things LINQ as an Syntactic Sugar of SQL queries. You can obviously use LINQ to SQL for interacting with database but LINQ is not only that.

LINQ comes in handy while parsing XML too.

Other benefits are like Sorting, advance selection and searching.

Silverlight kid is here.......

2009-05-12T14:01:00.003+05:30

Hi All,
I was never interested in coding but the moment my mentor Mr. Deepak Sharma asked me to learn silverlight, I fell in love with it. The first thing which I ever made in my life was a christmas card in silverlight 1.0, and fortunately everybody liked it. From then onwards there was no looking back.I continued to experiment with it. Silverlight has cast a spell on me and Tanmoy has always increased my interest in it .And now when Tanmoy asked me to contribute in this blog, I was thrilled.I would try to keep this spirit of silverlight alive in me and would try to enlighten others with the knowledge I acquire in this journey.
Thanks to Tanmoy!

Introducing Ramya...Another Silverlight Geek

2009-05-12T11:53:00.000+05:30

Hi,
to make this blog more effective I requested Ramya to join this blog. She has started her programming career with Silverlight and proved excellence in a very short time. Its a great thing that from now we two will be reviewing our posts and can keep posting while the other one is busy. It will increase the quality and number of posts.

Silverlight rocks as she does.

Lets welcome her....

~Tanmoy

Silverlight 3 Wish List ---- What We Got

2009-05-02T01:20:00.001+05:30

Hi all,

Silverlight 3 Beta is released. Now it does fulfill many of the features that the community has hoped for. Joe Stegman has marged the Silverlight 3 wish lists from different sources (Including the thread I have started) and put them in a table sorted on popularity. Lets check it with what we got. This is partial and please help me complete it and let me know in cases I am wrong.

Feature	Count	Comments	Status	Note
Web camera and/or microphone input	33	Includes requests for just microphone as well	No
Bitmap APIs	26	Support get/set pixels and/or rendering a XAML scene to a bitmap.	Partial. (After reading the comments and in forums and agree with it)	Check this application.
Full 3D	24	Full 3D support (full 3D models)	Partial	Video1 Video2
Printing	20	Printing APIs	No
Offline and/or out of browser support	16	Support running Silverlight when not online (or completely out of the browser)	Yes	Video
Bi-directional text and/or complex script	9		No
UDP/P2P	9	UDP APIs generally for Peer to Peer support	No
Rich text support	8	Editing and display	No
Right mouse button	8	Ability to configure the right click	No
Text quality	8	Improved text quality	Partial	Clear type will be supported
HTML Integration	7	Support HTML hosting (live HTML documents) and/or HTML translation	No
Interactive designer	7	Support an interactive designer in Visual Studio	No	Will be with VS 2010
Support more than BasicHttpBinding	7	Most common request is for WSHttpBinding	No
Improve Silverlight/WPF compatibility	6	Mostly feature requests for either Silverlight and/or WPF	Partial	Gap is reducing over time
More controls	6	Random/general requests	Yes	With the new toolkit release it increases.
SaveFileDialog	6		Yes
Data and/or property triggers	5		No
Reporting services	5		No
Synchronous web service calls	5		No	Is it really needed?
ADO.NET DataSet/DataTable	4		Partial	Check out new data controls and RIA services.
Alpha video	4	Chroma key support
Clipboard support	4		No	Some people think of it as security threat. Workaround
Drawing APIs (immediate mode)	4			Pixel effects?
Element name binding	4			Element to element binding is now possible.
Improved DataGrid	4	Several different requests
Local relational database (SQL)	4
Modal dialog	4
Mouse wheel	4	API and support in existing controls	No	Helper class available
Selectable text	4
Assembly caching	3	Want a framework for downloading/managing assemblies	Yes	Here.
Credentials/auth	3	Requests for networking stack and ASP.NET type integration
Custom markup extensions	3		No
Multi-target DLLs for .NET/SL	3	Build a business object DLL once for both .NET and Silverlight	No
Multi-touch support	3
Path Animation	3		No
Speech and better audio decoder	3
VisualBrush	3		No
9 Grid	2
Better keyboard APIs	2	Platform independent keycode
Better SEO	2		Yes	Check this blog.
Binding support to anonymous types	2
Direct database access	2	OLEDB/ODBC equivalent	No
Flow panel	2
GIF support	2		No	Probably it wont be there. See what Pete Brown says.
Global/dynamic styles (skinning)	2
Integrated CTRL+F (in page search)	2
Sound APIs (equalizer)	2	Includes looping	No
TileBrush (Image Tiling)	2		No
XPS Support	2
64-bit platform support	1
Android support	1
Better N-tier support	1	Improved data access	Yes	RIA Services
Better SharePoint integration	1
Block style text	1	Bulleted lists, paragraphs	No	But check this out
Cell based animation	1
CollectionView	1
Color management	1
Digital/XAP signing	1
Double Click event	1		No	work around
Drag and Drop	1	Between the desktop and Silverlight	No
Full 5.1 sound	1	Currently fold down to stereo	No
IDataErrorInfo	1
Inverse kinematics (bones)	1	Flash 10 feature
MediaTimeline	1
Multi-binding	1
Navigation model	1	Includes browser history integration	Yes	Video
Validation controls	1		Yes	Check this.
XPATH support for data binding	1

Thanks...

Some Guidelines For Developing Silverlight Applications

2009-02-06T10:20:00.004+05:30

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

2009-01-03T10:26:00.001+05:30

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

2008-12-09T04:59:00.005+05:30

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

2008-11-04T22:35:00.004+05:30

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?

2008-10-31T11:32:00.005+05:30

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

2008-10-19T23:06:00.001+05:30

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

2008-10-16T23:13:00.007+05:30

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

2008-10-15T09:16:00.004+05:30

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

2008-09-30T22:30:00.007+05:30

[ 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. :)

Starting Silverlight

2008-09-22T00:11:00.008+05:30

[ Links for the tools are updated for Silverlight 2. Some of the sites listed below may not been updated yet and contain beta 2 applications and links. ]

Hi all,

My blog has survived a few months and I was posting on somewhat random articles and applications. Some of my friends have started learning Silverlight and asked me to share some links and samples. Here is my list.

Tools

Basic thing you need....
Install Silverlight 2 runtime from here.

Essential for all....
Expression Blend 2
Expression Blend 2 SP 1
Deep Zoom Composer (Used for a feature called DeepZoom in Silverlight)
Silverlight 2 Documentation

If you are interested in design....
Expression Design 2 Trial.
Expression Encoder Trial.

If You are interested in programming....
1. If you don't know C#, start learning basics of it. The basic would be sufficient for building simple Silverlight applications.

2. If you have C# background, probably you have worked with Visual Studio. If not, install it and play a little time with it. Silverlight 2 needs Visual Studio 2008 and you can get a trial version from here. You also need to install SP1 for VS 2008.

3. Install Silverlight Tools For Visual Studio 2008. (It also installs Silverlight plug-in for the browsers if it is not there).

Optional but will help you....
Get an live account and you can get 10 GB of hosting space free for the Silverlight applications you build. Get it here.

Learning materials

I am completely new. Where from I start?
Silverlight.net has a great collection of tutorials and videos. You can start from the quick start tutorials.
Using Expression Blend
QuickStart (Mainly for the programmers but designers might see it to get an idea)

You can also start by watching the videos.

Try building something as soon as you feel you can create a simple application.

I am a Flash Developer. Where from I start?
1. You need the basic tools described in the first section.
2. Here is a link that will help you use your existing skills to building Silverlight application.

I know the basics and wanna dig into deeper.
There are some videos and tutorials focused on some advanced topics in Silverlight.net.
You will get a complete set of resources here.

Hey. Let me see some cool samples before I start.
You can find big list of excellent applications created in Silverlight here and here.

PS: Actually you can find almost everything in the Silverlight Community Site. It has a great forum that helps in every type of problems you face working with Silverlight.

Some Other Links

You can get a detail listing of tools and materials here.
Overview
Wikipedia link. :) Don't you think it is a must?
An Excellent Video Tutorial.
Another Big List.

Actually nothing new here. But I think this blog would be incomplete if I don't stack some useful links up.

Let's Not Stop Here

2008-09-18T18:13:00.005+05:30

[ Updated for Silverlight 2 ]

Hi friends,

In my previous post I have listed 10 lesser known things in Silverlight. Here are some more.....

1. Scale Mode: See the following code.

<div style="height:5;width:500;border:solid 3px #00FF00;"">
<asp:Silverlight ScaleMode="None" Width="100%" Height="100%" ...... />
</div>

Now see the blue part. There are 3 values you can set in ScaleMode. None (that is default), Stretch and Zoom.

None: The Silverlight component retains its size specified inside. (in Page.xaml for example)
Stretch: The Silverlight component occupies the available space inside the div.
Zoom: Like Stretch but keeps the aspect ratio.

Now we have one Silverlight application. In the Page.xaml we have set the height and width of the user control to 100 and 400. We have one grid that occupies this usercontrol and has a red background.

Now in the html we have set silverlight contenainer div size to be 500 x 500. If we now set ScaleMode="None" That is default we will see our application rendered like the following.

The green border is the border of the silverlight container div. Red part is our original silverlight component.

Following is in Stretch mode

This is in Zoom mode

See how it preserves its aspect ratio in Zoom mode.

2. Check Silverlight Version: You can check what silverlight version is installed in your computer in this page.

3. Silverlight Event Bubbling: Silverlight has some events that are called routed events and they bubble from child to its parent element. Mainly mouse and keyboard events fall in this category.

This simple application will show how Silverlight event bubbling works and what you can do to allow or stop it.

Lets have 3 canvases and arranged them like the following

Blue Part is the root canvas, red one is a child inside blue one and green one is inside red canvas.

RootCanvas -> Blue one
Child1Canvas -> Red one
Child2Canvas -> Green one

Now we will write 3 MouseLeftButtonDown event handlers for 3 of them.

public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded);
}

void Page_Loaded(object sender, RoutedEventArgs e)
{
RootCanvas.MouseLeftButtonDown += new MouseButtonEventHandler(RootCanvas_MouseLeftButtonDown);

Child1Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child1Canvas_MouseLeftButtonDown);

Child2Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child2Canvas_MouseLeftButtonDown);
}

void Child2Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}

void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}

void RootCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}

Now set breakpoints on each of the event handlers to see what is going on. You can also put alert for it. Now run the application and click on the green canvas. You will see the break points are hit in the order green canvas (child 2) to its parent red canvas to its parent the blue canvas.
Now this is the default behavior. Now suppose we want to pass the event from green to its parent red but not to the blue one. Now as at the red canvas we want to stop the bubbling we have to write
e.Handled=true at its event handler. Now the event will not be passed to the blue one.

void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

Now Silverlight controls handles the mouse events internally and they don't let them bubble. So if you place a button or other Silverlight control inside the green canvas you will not be able to catch its mouse down event or pass it to the parent canvas.

See this great blog post and this documentation for details.

4. Enable help for Silverlight in Visual Studio 2008: You already installed Silverlight SDK and still can't see help on Silverlight from Visual Studio? Here is how to enable it.

1. Open Visual Studio (you might have to open VS as an administrator).
2. In the Help menu, choose Index. Microsoft Document Explorer displays.
3. In the Filtered by: drop-down, choose to (unfiltered).
4. In the Look for field, type Collection Manager.
5. Below the Collection Manager heading, double click Help.
6. Below the Collections available for inclusion in VSCC heading, check Microsoft Silverlight 2
SDK Documentation.
7. Click Update VSCC.

Now after restarting visual studio you can see it in help -> contents.

This steps you can find inside the readme file
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Documentation\VS-Help\en-us\readme.txt

5. Document outline: This is actually a feature in visual studio. If you layout is complex and you want to easily navigate to parent or child elements you can use this. View -> Other winndows -> Document outline.

6. Why my mouse events aint working? Have one simple Silverlight application with a green Grid with height and width 300 and 400. At the MouseLeftButtonDown event handler write one alert.

private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
HtmlPage.Window.Alert("Event is Fired and catched");
}

Now run the application and click the Grid. The alert will come. Now remove the background attribute from the grid and run the application. Click the grid. No alert will come. :). Though I don't know the reason for it but it might be intentional. Guess why? It might prevent bad guys to fool user think clicking an html element.

Thanks all for keep on visiting my blog. I am a bit busy with my work right now and I will post some material for the newbies in Silverlight in my future posts.

A Simple Wave Generator In Silverlight

2008-09-11T21:40:00.013+05:30

[ Updated for Silverlight 2 ]

Hi,
I was building a simple waveform generator that will generate waveform for an equation containing sin, cos and tan. It will choose random color when drawing the curve and can draw one curve over another. The application in run looks like the following.

I cannot put it here as it wont fit in this width. See it here.

What is going inside......

The curve is actually a collection of ellipses of height and width 5. You can see it better if you draw a curve like tan() x sin().

I am trying to explain it from a top level (less detail) it step by step

1. We will have a stack named EqunList that will put the equation in string elements. For example it will store " sin" if you click sin button and then if you click + it will push "+" in the stack above sin.

2. Now when we click draw button the equation list will be converted from infix to postfix notation so that it eliminates the brackets and let us calculate the values of the equation easily.

3. It then chooses a random color for drawing the curve. Then it starts a timer that will put one ellipse every 15 milliseconds so that it seems the curve is been drawn slowly. We will talk about setting x and y coordinates (Canvas.Left and Canvas.Top respectively) of the ellipses shortly.

4. There will be a counter that will be incremented and after reaching a certain value (width of the drawing plane in pixels) will stop the timer.

5. Now the x value of the ellipse (Canvas.Left) will be incremented by 1 in each timer tick (It can be made higher but then the curve might not look very good). The Y value of the ellipse will be determined by evaluating the equation for an angle that will vary from 0 to 2*PI. Here the angle will be increased by 2 * Math.PI / 200 each time. ( It will actually creates a complete cycle in 200 pixels. Also the resultant value will be multiplied by 100. The reason of the multiplier is because otherwise the curve will have height of only 2 pixel in case of a sine wave. The curve will be drawn not from the top but from the middle of the canvas to take account the negetive values as well as positive values.

There are some minor tasks like disabling the buttons while one curve is drawn or clearing the equation after the curve is been drawn.

Here is the complete source code for it.

Please leave a comment if you have any doubt and also how to improve it. I am still inexperienced in programming field and have lots to know from you...
Thanks....

PS: BTW if you love music check out Madonna's new album Hard Candy. I am listening to the songs right now and they are excellent :)

Google Chrome - An Exciting Eeperience

2008-09-03T20:27:00.027+05:30

Hi,

Lets talk about something not directly related to Silverlight.

Last night Google launched Chrome, its new open source browser. It is currently in beta. I have tried it and it seems exciting. Here is my "half day experience" about it.

Things I like

1.Clean Interface: It has the cleanest interface of all the browsers I have used. While viewing websites you really will see the content not the browser. It has one url bar and that is also used for searching.

2. Task manager: Control -> Developer -> task manager or shift + escape. It shows which tab is using most of your cpu and memory and you can easily end it. It has high details of the processing running in it . Stats for nerds.

3.Most Visited sites: It has opera style speed dial feature that stores most visited 9 sites in thumbnail format for easy accessing. It also keeps trak of recent changes and provide a means to search history.

4.Developer support: It has a powerful javascript console and debugging support for helping developers. It also has support for CSS and html like Firebug in FF.

5. Incognito browsing: ctrl+shift+N. It will help you prevent your privacy while not storing anything of what you do in that window. It is an easy way when we have to surf internet from internet cafe or other untrusted places.

6. Search history: We can search inside the history. ctrl + H.

7. Crash resistant: One tab is completely independent of others and crashing of one tab or taking longer time to load does not afect others. This is really exciting and I have not been successful to have it crash or misbehave.

8. Fast opening and closing time: In my experience it opens faster and close smoothly.

There are lots of other features that I like but above ones are the main ones I have seen now.

PS: It claims about being faster than other browsers that might be debatable. Though I can say it is not slower than those for sure.

Things I don't like

1. Password management: It will show your password if you go to settings -> options -> minor tasks -> show saved password then choose the web site and show password. I think it should be controled by a master password like FF does and also it should not be enabled default.

Acid test : I have make Acid 3 test in it and it got a score of 76. Failed ofcourse. But it is still a decent score as IE 7 scores 11 FF3 71 and Opera-9 80 in it.

And oh Yes Silverlight! I am using Windows Vista as my OS. I have seen my blog in this browser and I can see my silverlight application there. But they do not function properly. :(. In Silverlight.net site I can see Silverlight 2 applications but not the Silverlight 1 applications. Silverlight 2 applications are also not working properly. But that does not seem to be a problem on long go as both are beta right now and if Chrome gets popularity Microsoft will get it work there too.

I will continue using it and will hope it gets good popularity soon.

Download link www.google.com/chrome

Skinning a Simple Slider

2008-08-28T11:45:00.009+05:30

[ Updated for Silverlight 2 ]

Hi all,

In this post I will explain how we can make a customized slider from the default one. Silverlight makes customizing a control very easy. We will concentrate on the design part only and try to do total thing without looking to the xaml code.

Here is how it will look finally.

Upper one is the default one and the lower one is the customized one.

Silverlight separates a controls programmatic behavior to its look and feel. Changing one of them does not affect the other.

Now here we will modify the look and feel of it. In other words we will change the default Template" or "Skin" the slider.

We will try to modify it in expression blend because though theoretically it can be done from Visual Studio practically it is lot more easier in blend.

Now first we have to understand Silverlight slider control consists of different parts. First of all it has vertical and horizontal part. Here we are using Horizontal one and that is default. Each of them consists of same set of components. Here we will concentrate on horizontal one but same concept will be applied for vertical one also.

Now Make a project in blend named SliderSkinningExample. Now add one slider control to it and give it a width of 400. It will now look like the top one in the previous image. Now right click it in interaction window and click edit control parts then create a copy.

We can create and empty template too. But as a slider contains different parts it is easier to make a copy of the default one and have some changes in it.

Now name the template to MySliderSkin. Now we have two choices of placing the template either in the same document or in the App.xaml. If you define it in App.xaml (Application) it will be accessible from anywhere in your page whereas this document will only make it available to the current usercontrol. Here we will define it in document. I will explain why later.

Now you will see the parts of the slider like the following.

Now we can see there is a main root grid and two child grid inside it; HorizontalTemplate and VerticalTemplate. Each has two repeat buttons and one thumb and one background rectangle. (They also ve one HorizontalTrackRectangleDisabledOverlay, ThumbDisabledOverlay and
VerticalTrackRectangleDisabledOverlay rectangle but we will not consider them for now.)

The main theme for the slider looks somewhat like the following. (Considering only the horizontal part)

The blue part is the thumb that tells what the current position is. Green part is the background rectangle. Red part is the "HorizontalTrackLargeChangeDecreaseRepeatButton" and the orange part is the "HorizontalTrackLargeChangeIncreaseRepeatButton".

Here we will be considering only the horizontal one. Make the vertical template part's visibility collapsed.

Now we will have to skin 4 components of the slider to get what we want.

1. Background Rectangle: (TrackRectangle). Make its height 12, RadiusX and RadiusY to 5, StrokeThicknes 1. Now we will apply some gradient to its Fill.

We have 3 gradient stop. Left and right one to #FF3F3F47 and middle one to #FF202022. We will leave other properties of this rectangle unchanged.

2. HorizontalTrackLargeChangeDecreaseRepeatButton: We can not directly change it as it is a control. we have to again make a template for it. RightClick it and create a copy of the default template. You will see only a Grid inside it. Have two rectangles inside the root grid. (Make the root grid opacity to 100% as by default it is set to zero.

a) First rectangle: Set its width auto, height 10, stroke thickness 0. Make horizontal and vertical alignment to stretch. RadiusX and RadiusY to 4 (as this is slightly smaller than the background rectangle we are setting the RadiusX and RadiusY to 4 insteed of 5).
Fill this rectangle with the same style gradient, only make the gradient stop colors #FFEAC6C6 for left and right and #FFF7F7F7 for the middle. Set left margin 6.

b) Second rectangle: The purpose of this rectangle is to hide the rounded corner of the first rectangle to the right side. See the following two images to get the clear idea.

Without the second rectangle.

with second rectangle.

Copy the first rectangle. Make horizontal alignment of the second rectangle right and have a width of 10 and height of 10. Keep radiusx and radiusy 0. Set the right margin to -2. (You will not see it like the above image as we did not skin the thumb yet.)

3. HorizontalThumb: Make horizontal thumb height and width to auto. Create a copy of the template for HorizontalThumb. Delete everything inside it except the root grid. Have two ellipse inside it.

a) Outer ellipse: Height and width 18. Stroke thickness 2. Fill radial gradient. Left and right of gradient stop color #FF000000 middle gradient stop color #FFF0F0F4. Stroke color #FF555555.

a) Inner ellipse: Height and width 5. Stroke thickness 2. Fill #FFFFFFFF. Stroke color #FF727070. Horizontal and vertical alignment center.

4. HorizontalTrackLargeChangeIncreaseRepeatButton: No need to change.

Now the slider should look like the above one.

To apply this style to a new slider drag a new slider in the page and right click it and select edit control part -> apply resource -> MySliderSkin.

Unto now we never seen the xaml that is created for this. Frankly we don't have to. Just to know what blend has created for us lets see it in xaml view in blend or open it from Visual Studio.

Everything has been created inside UserControl.Resources tag. We can copy this to App.xaml also and only have to change to Application.Resources from UserControl.Resources. If you carefully see you will see there are something called VisualState and VisualStateGroup inside the xaml code. They are used for handling different states like mouse over, pressed , focused etc. They can be controlled from blend design view though we are not doing anything with them in this example.

Another thing: We did not created the style in Application level because if we create it we can not use blend for making templates for the inner controls of the slider like thumb. This problem is likely to be fixed in later versions of blend.

Please leave a comment if you have any doubt or if you found some error in this.

I am trying to build some simple Silverlight application at home and I will share them once finished. I am also thinking of changing the colors and modifying this blog a bit. Bye for now...

Some Lesser known things in Silverlight

2008-07-29T15:29:00.001+05:30

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

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.

Why I Shifted My Blog

2008-07-18T16:48:00.000+05:30

I have been using Wordpress.com for my blogs for quite a long time. I did not have any problem until recenly. Now as I am building a blog for Silverlight I first chosen Wordpress. The problem I faced was I can not display my application in my blog using javascript or even iframe. That was really annoying as I need at least iframe support. I searched their forum and it clearly been said iframe support is a distant dream. After continuing for some days I finally changed it to "old friend" blogger.com. Now I changed the design a bit. I am not a designer and this blog might not look very nice to you :).Still it is more flexible than that is in Wordpress and I will try to continue this here.
Thanks

Mahjong! My favorite game

2008-07-18T10:35:00.008+05:30

[ Updated for Silverlight 2]

Mahjong has been my favorite game since the days I started using Linux (SUSE 10.2). I just tried and made "Something" (Play it full screen. F11). So I can play my favorite game in my off time. Of course it was again with Silverlight. Now here is the explanation and logic used to make this game.

Design

Page:

Page has 4 grids each with 15x9 dimension. So ultimately it gives the impression of a 3D stack. Each cell (total 15x9x4 cells) can be filled with a tile or left empty. The grids are been filled with tiles such a way it looks like a nice structure. In this structure 4th grid (I am calling as 4th rank) is empty. There are total 144 tiles. There are 12 types of tiles.

Tiles:

Each Tile is a user control. It has two canvases with rounded corner rectangles to make the nice 3D effect.

On the top canvas there are two rectangles. One for holding the tile image, another one to have mouse over effect.(Yellow one).

Each tile has 4 types of animations associated with it. (ClickAnimation, ClickOutAnimation, MouseOverAnimation, NotMatch). Click out animation will happen if user clicks the same tile twice. Not mach animation will happen when user tries to match wrong set of tiles.

Each tile has one TileNumber that determines the image to be put in the tile and it also helps in finding match.

Algorithm and code

Tile:

Each tile is having four variables associated with it.

TileNumber- Used to find match.

TilePosition- Gives rank, row and column in a 3 dimensional structure.

ParentPage- A reference to the Page class so it can call its methods.

IsClicked- Tells if the tile has already been clicked

Before starting any animation it will call its ParentPage method CheckIfFree to see if the tile is free.

On click of the tile after confirming it is free It will again call another parent page method TileClicked. This method will try to match this current tile with the previous tile clicked. If it matches It will destroy two tiles or it will show the NotMatch animation.

The constructor of this user control takes a random number from Page and set the tile image accordingly.

Main Page and logic:

In the Page there are 4 grids (4th one is empty in this tile structure I am now using).

First I am making the look of the board with a 3 dimensional array. Each element of that array represents empty or occupied state in boolean.

After making the grid structure I am adding tiles which are marked occupied.

In making the tiles for each tile GetTileNumber method returns one random number between 0 to 11 and it returns such a way that every number will be for 12 times making total 144 tiles.

This is the tile number used generally and I am also using for my game.

int[] TileTypeCount;
TileTypeCount = new int[12];

private int GetTileNumber()
{
int tileNo;
do
{
tileNo = rnd.Next(12);
} while (TileTypeCount[tileNo] >= 12);

TileTypeCount[tileNo]++;
return tileNo;
}

Filling tiles for the fast grid. Lowest level

// for set 1 rank 0
for (int row = MaxRow - 1; row >= 0; row--)
{
for (int col = 0; col < MaxCol; col++)
{
if (TileGridStructure[0, row, col]) continue;
TileStructure tile = new TileStructure(GetTileNumber(), this, new Position(0, row, col));
Grid.SetRow(tile, row);
Grid.SetColumn(tile, col);
Set1.Children.Add(tile);
TileCollection[0, row, col] = tile;
}
}

TileGridStructure tells if this place is to be filled with a tile or not.

Here you will find the complete source code.

Bye for now. Please leave a comment if you have any doubt or correction.

Experimenting with DeepZoom

2008-07-18T10:34:00.002+05:30

A new feature in silverlight is DeepZoom. Its extreamly popular in the Silverlight community and looks kool. I never touched it before. Today I installed DeepZoom Composer and started building "Something". It was easier than I thought. I used 50 images (Hi-resolution upto 7432 X 4168 ). All collected from wikipedia featured pictures to avoid licencing issues. I shaped it over like a G. It goes well. But I was trying to make something like DeepZoomObama. Last I saw the blog that describes Making of DeepZoomObama project. All that is need to make a mosaic with lots of images. I collected more (more than 350) Images from wikipedia and started building it. It took only around 2 to 3 hours to build this.

The software that used for this is andreamosaic and Silverlight Deep Zoom composer. Two softwares are extremely easy to use.

Eight Queen Code

2008-07-18T10:33:00.011+05:30

[Updated for Silverlight 2]

I blogged previously about the N-Queen problem. Here I am going to explain how I did it.

The Board and the Queen

I used a StackPanel to hold the Board and the button. The board is a 8x 8 Grid. And empty at design time. Also have a event handler for the button Click.
The Queen is a user control having just a Image with a white Background.
Now adding one Canvas for each square and painting it with blackish or whitish gradient brush already created as a resource

Repeating this for 64 squares.

Canvas c = new Canvas();

if ((row + col) % 2 == 0)

{

c.Background = (LinearGradientBrush)Resources["BlackBrush"];

}

else

{

c.Background = (LinearGradientBrush)Resources["WhiteBrush"];

}

Also having a blue hidden rectangle in each square that shows up when that square is being traversed and creates a nice animation. Also having a global variable for storing the squares and blue rectangles as we need them later.

For adding and removing the Queen I am using this code.

Sqare[row, col].Children.Add(new Queen());

Sqare[row, col].Children.RemoveAt(0);

The Animation

The animation for the blue rectangle is like the following.

See there is no target name defined for the storyboard as we will be applying different square (The blue rectangle over the square exactly) as target.

AnimSquare.Stop();

Storyboard.SetTarget(AnimSquare, SquareMask[Grow, Gcol]);

AnimSquare.Begin();

The Algorithm

The algorithm is as follows.

As there will be 8 Queens for 8 rows there will be one at each row.

Start from the left top square.

Put a Queen if that does not captured by other queens.

Jump to the next row and try it for 8 squares in that row.

If unsuccessful then go to previous row and remove the previous Queen placed there and try another square that have not been tried for that row.

If that also unsuccessful go to lower rows until you find a new square to put the queen in that row.

This can be achieved with a recursion.

private void PlaceQueen(int row, int col)

{

if (row == NoOFQueen) return; //Get out of recursion

CheckedCol[row] = col;

if (IsSafe(row, col))

{

if (!flag)

{

PutQueen(row, col);

row++;

col = 0;

}

else

{

CheckedCol[row] = 0;

row--;

RemoveQueen(row, CheckedCol[row]);

col = CheckedCol[row] + 1;

}

}

else

{

if (col == (NoOFQueen - 1)) // No where to place queen in the row

{

CheckedCol[row] = 0;

row--;

RemoveQueen(row, CheckedCol[row]);

}

else

{

col++;

}

}

//Grow = row; Gcol = col;

PlaceQueen(row, col);

}

Now the methods used here are self explanatory and simple. There is only one tricky part in this recursion. That is the boolean flag. It keeps the track if the queen from the last column has been removed. So next there wont be any queen placed on that column even if the square is safe. It will go farther one level down and so. The flag is set false whenever a new queen is placed on the board.

There I did a little change in this method. Instead of calling the same method from PlaceQueen it has been called from a Tick event of a timer to enable animation. (see the commented Grow and Gcol. G for global ).

This version of my program is still yet needs optimization and some code cleanup. It does not check if something unexpected happens. It doesnt even have a safecounter for getting out of recursion in case 8 Queens can not be placed at all.

Here is the demo.

And you can download the complete source from here.

for any clarification or modification please leave a comment.

N-Queen Problem using Backtrack Recursion

2008-07-18T10:31:00.010+05:30

[ Updated for Silverlight 2 ]

Hi,
For last two days I am trying to build a Silverlight Program that will solve n-queen (here I am using 8 ) problem and show it step by step to the user. After messing up with the logic finally managed to get it work. The algorithm still needs some improvements. I have uploaded the application in live streaming .

Those don't know about the 8-Queen Puzzle it is to place 8 queens in a chess board so no queen can capture others.

Here is the complete code for it. I will look up the code and clean it. I will explain it in my next post. For now I am listening to Celine Dion. There are lots of things happening today to make me happy :)

Beta 1 is dead

2008-07-18T10:30:00.003+05:30

[ Beta 2 is dead too. This post is invalid after Silverlight 2 released ]

As we see with the linux development community there are some who like beta versions (me one of them). In Fedora download site I got it saying "Did someone say... beta?"

The main thing is there are some unknown or unintentional features (Bugs?!) that we use in betas to get our programs work. These hacks work great until the feature has been changed or removed :(. In the Code complete Steve Mcconnell warns us not to use them.

Anyway the code we have been building in Silverlight 2 beta 1 refused to work in beta 2. After some search and try error it did run but some parts needed complete rewrite.

Still I say its better to modify your application for beta 2 in case you did not do it yet. Here is why......

1. The user who is about to see it is more likely having latest plugin that is beta 2 and your beta 1 will refuse to work.

2. With time goes there will not be much help available for beta 1. Forum people will say UPGRADE.

3. There has been lots of modification from beta 1 to beta 2 but it is expected not to change much from beta 2 to final version.

So how to upgrade........

1. Uninstall your previous Silverlight stuffs. VS 2008 tool, Blend, everything.

2. Install new versions of those tools Silverlight tools beta 2. Expression Blend 2.5 June Preview.

3. Open your Visual Studio solution file. It will ask you to upgrade with beta 2.

4. Build your program. I will come to this point later.

5. After successfully build check the test aspx and html page of the website. There change type="application/x-silverlight-2-b2" in html and in aspx replace version attribute with MinimumVersion="2.0.30523". Also in the install silverlight link will be changed from http://go2.microsoft.com/fwlink/?LinkId=108182 to http://go2.microsoft.com/fwlink/?LinkID=115261.

What if my build failed...........

There are huge modifications from beta 1 to beta 2. So your old application might need to modify.

1. See the change list from here.

2. In my case the problem was with WebClient class. Because WebClient has been moved to System.Net.dll.

3. Another problem you might face is with event bubbling. Jesse Liberty has a great post explaning it. Basically you wont be able to catch mouse or keyboard events for controls because they themselves handle it. It has been done to maintain similarity between WPF and Silverlight. There are some workarounds if you really want to handle those events yourself. First Modify the template of your control or build a custom control deriving from the control you want to modify.

What if all of them don't work for me.........

Forums :)

My Experience with Silverlight

2008-07-18T09:25:00.002+05:30

I have started my programming life with Silverlight. So it might be that I see it from a different view than some others already been in animation and programming.

The thrill that has been with it was its limited spread at that time. So there were hardly any people whom you can ask for help. The online rapid growing comunity has been a great comfort and still is. Some people really did excellent things that keep on impressing me.
The first task was a presentation kind of thing to be done with Silverlight 1.0. The animations and design are done by Pallavi and I know only little about designing.

As I am going through it and trying to explore more of it there are so many things to learn. After a bit break with Silverlight after 1.0 I am now back and working with Silverlight.

I am not a writer and so I better stop now. I will try to keep on posting here some tips and tricks and workarounds that might help you save the time I have wasted to learn them.

Thanks all for visiting my blog. I will try to keep it alive.