Introduction|:
As many of you may already know Microsoft Silverlight is the latest buzzword in the web development domain. Taking inspiration from Scott Gu’s tutorials I wanted to build something simple just to acclimatize myself to building an UI in XAML and get comfortable working with Microsoft expression Blend 2 and Microsoft Visual Studio 2008. Below is Calculator application implemented using MS Silverlight performing basic Math functions : addition, subtraction, division and multiplication. Feel free to poke around. The code for the entire project can be downloaded from
here.
Time for completion|:
Believe it or not this project did not take more than 8 hours for completion. Among the 8 the UI came together in barely 3 hours and the code in rest. Considering the fact that I was using work with this for the first time I would say that tools provided to develop the UI are pretty neat.
User Interface|:
As you must have noticed I am no graphic designer, however the interesting thing to note here is the simplicity involved in putting together the UI (e.g. Linear and Radial color fades) using expression blend. The integration between VS2008 and Expression Blend is still a little quirky but one can easily get around it. Just as any web form we define styles in CSS here the styles are defined in App.xaml and then referenced in the UI elements . I would recommend to build all styles in App.xaml using expression blend and then tie it to the UI elements unless you’re defining something as simple as Fore Color for all buttons . Expression blend is simple to use and you can put together some cool UIs quickly and easily once you get used to it.
Coding|:
If you’re wondering why the code took 5 hrs…..well I found out that things are not always as simple as they seem. Try writing a calculator desktop app from scratch yourself and you will know what I mean. Here the challenge was more from displaying correct characters in the display based on user action than the actual computation itself. For example, when you’re trying to do 2+3+4 then each time user clicks ‘+’ the previous result has to be displayed i.e. when user clicks “+” for the second time ( after entering 3) result of (2+3) ‘5’ needs to be displayed and finally the result 9 when user clicks “=” or any other command key. If you still feel this was simple think about dealing with 2+3X4 ;).
Conclusion|:
I feel like I have scratched the tip of the Iceberg with building MS Silverlight applications. The next logical step will be to build a DB driven application in Silverlight. This will be my next project. Apart from additional code to support advanced Calculator functions (e.g. M+,M-, MC,MR) I also wanted to explore animation controls to provide ‘push’ effect for the calculator buttons but ran short of time. Although developing UI in XAML is quite similar to that of usual web development it is still lot different and will take some getting used to. The more quality time you spend in Expression Blend the sleeker will be the UI you can come up with. You will find that I have tried my best to comment the code to ease readability and simplify logic flow. Please do send your comments, suggestions to rohanghatpande@gmail.com
References|: