Before even anyone of you look at my animation, let me clarify again that I DON’T HAVE DESIGNER’S EYE … which basically means if you are looking for some really cool UI then you are at wrong place. With that info. noted I also would like to let you know that though I am not a good designer, I am still a developer and just like any developer, me too can design UI (no matter how terrible it is) …
In this post, I displaying a very simple Blinking Light Silverlight animation created using only Expression Blend 4. I have created all drawings and animation using Expression Blend in just 20 mins for this post, and I must say that I am really impressed with this tool. If I wanted to do the same thing with good ol’ Visual Studio 2010, then it would have taken me at least couple of hours or more. (Or may be less if you are very good at reading XAML). Honestly, I’ve not even used core feature of Blend (which is Storyboard), instead I wrote very simple code to do the job.
As first step, I created two circle like drawings and placed them inside of Grid
Honestly, I don’t have so called “designer’s eye”. So I am really bad with designing. I think this is the curse that every developer bares … or may be it is a good thing, who knows. So the demo I am showing here is not so eye catching, but this solves the purpose so I am not going crazy with designing.
Just like HTML, Silverlight too has a concept of “Styling”, but it is bit different that what we do in HTML. Just like HTML here in Silverlight also we have different method of styling like inline styles or creating resource or use separate file that contains only styles. But this post is to show only basic concept of styling so I will just show inline code for styles, later on I will post more about other methods of styling.
In Silverlight each object can be styled individually as well as in group (just like HTML). And each style can be highly customized. For example, gradient in button. Or two different object can be used to create some new style, for example textbox with rounded corners.
If you are working with Silverlight and don’t have good “designer’s eye”, or planning to begin new project or simply want to play around with Silverlight then you might want to try these Silverlight navigation themes from Microsoft. Currently there are four standard themes are available for download from MSFT Site JetPack, Accent Color, Windows 7 and Cosmopolitan, they are highly customizable and free for any use. Basically they have all styles defined for all standard controls and Silverlight Toolkit (which is a must requirement for these themes to work)
Installing these themes to VS 2010 is way too easy. All you need to do is just execute VSIX files included in the package and you are all set. But if you want to use these themes in Blend 4, then it is a bit tricky process. First you need to extract those themes and then copy them to %ProgramFiles%\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight folder. But if you are using x64 bit OS then this path will be %ProgramFiles (x86)%\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight for you !!! And wait there is more (, yes me too watch late night TV commercials … ) apparently all of these files have same structure and same template file names so you can’t just copy all of these themes into one single location, since it will overwrite each other and in the end you will be left with only once theme that you copied last !! And there is no explanation of this in official read me document or any where on the net.